I do buttons totally in css. I didn't invent the code but found it and just modified it. No images required.
The button.css file is as follows:
ul {
list-style-type: none;
font-family: comic sans ms,toledo, comic book, arial, sans;
font-size: 22px;
margin: 0;
padding: 0;
width: 160px;
background-color: transparent;
}
li a {
display: block;
height: 28px;
border: 4px solid #008000;
border-radius: 0px 12px 0px 12px;
text-align: center;
padding: 0px 2px 5px 2px;
text-decoration: none;
color: white;
margin: 0px 0px 5px 0px;
background-color: #170504;
}
li a.active {
background-color: #FFD150; /* ACTIVE */
color: black;
font-style: normal;
font-weight: normal;
}
li a:hover:not(.active) {
background-color: #88ff88; /* HOVER */
color: black;
}
And the usage in your html is to add this line first in the body:
<link href="button.css" type="text/css" rel="stylesheet" />
And then to use it I do this in your html where you want the buttons to appear:
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stores.html">Stores</a></li>
<li><a href="resolutions.html">Resolutions</a></li>
<li><a href="club.html">Club</a></li>
<li><a href="shortcuts.html">Shortcuts</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
</ul>
This produces the buttons and the text on them. The 'class="active"' defines the active html page and make that specific button highlight.
It works quite nice and is easy to change text font/colors/sizes etc.
A small bit of advise for you , "Start changing your width units px to units vw and height units px to units vh " The reason for this as I discovered the hard way is much to do with responsive design
If you like to read up on this then follow this link below for additional tips
Fun with viewports
Now you make responsive design far easier as instead of targeting one view port and not all, you now target all
Yes you can do this media queries as stated in previous posts but .... Any idea how many screens there are now on the market on top of which you will have to target both portrait and landscape to target all.
Here is an example which you can also find on git hub of all the media breaks you would have to implement
Responsive design
Its still good to know some of this anyway , how ever talk about make it hard for yourself while you wrack your brains trying to work out how to cut down your code as much as possible where humanly possible
I would read some of this at any rate but ideally you wont flex displays with CSS and without the shear hard efforts that the above link presents although there will be I'm sure occasions where you need to do this
This had me going for nights on end as to how do I target all devices without all of this code Ouch !!
When to use rem , em , px, and %
Another interesting / educational topic I would read
Its where this pays to look into this in depth and not just at one link but many with regards any subject matter in relation to any topic and consider all suggestions for expertise in these areas
Please note there are tutorials on the net in which their coding is not correct to start with just to make life even more of a misery that coincidently some do deliberately as I also found out and much to my despise often asking ,
"In today's world where all need to know so much is this really to anyone's advantage to teach people to do things and approach subjects all the wrong way round "
Additional tips
U
se comments in your CSS file These will help you enormously when debugging your code whilst also prompting you as to what you have done and why
HTML Code for lets say a file named button.html
Code:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<! -- This is how you write a comment in HTML -->
<! -- link to our css style sheets which is folder cssfolder in this case -->
<linkrel="stylesheet"href="cssfolder/button.css">
<title>Document</title>
</head>
<body>
<! -- Enclose all in container so that I can use display = flex -->
<divclass="container">
<buttonclass = "btn">Click me </button>
</div>
</body>
</html>
Here is where we define the css style sheet
EG
Code:
/*Google fonts for use in your webpage should always be the first lines in your css file*/
@importurl('https://fonts.googleapis.com/css2?family=Lobster&family=Teko:wght@300;400;700&display=swap');
/* CSS should then after importing fonts begin with a reset function */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* More information on this can be found at address
* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/
}
/* set up general style for body and html over all */
body,html{
background-color: rgb(0, 0, 0);
font-size: 20px;
color:rgb(255, 255, 255) ;
padding: 10px ;
}
.container {
/* I want this to be flex for responsive design */
display: flex;
/*define the width */
/*80% of the view port */
width: 80vw ;
height: 90vh ; /*90% of the viewport */
border-style: solid ;
border-color: white;
border-width: 1px; /* Here ive used px top express width */
/* lets give it some padding and alignment */
/* add padding */
padding :5px ;
margin:auto; /*centralise this container in the page */
/* now centralise content for example */
justify-content: center;
align-items: center;
/*Lets make the corners rounded on this CONTAINER */
border-radius:10px ;
}
/* Call the class name that refers to the object */
/* In this case what happens when we hover over the button object */
/* Class : event */
.btn:hover{
/* Change the text colour to what ever you want VS is great for this */
color:rgb(240, 214, 15) ;
}
/ * What do we want to see when button is focused with in * /
.btn:focus-within
{
color:white ;
}
/* DEFINE THE BUTTON */
.btn {
/*I want this to adjust with box sizing Everything in CSS is a box */
display:flex;
/*Center all items */
align-items:center;
justify-content:center;
/*Notice comments to prompt what we have done
Make liberal use of comments to break CSS code into discrete sections. Use “sentence case” comments and consistent text indentation
*/
width: 30vw; /* Note using single line comment with units now being in vw */
height: 7vh; /* Here I use VH */
/* Change the background color */
background-color: hsl(219, 100%, 50%);
/* Change foreground color */
color:red;
/*Lets change the font */
font-family: 'Teko' , Georgia, 'Times New Roman', Times, serif;
font-weight: 500;
font-size:4vw;
border-radius: 5px;
}
Having got this far you would then use JS to add code to the button.onclick event or using which ever variation of JavaScript framework you dice best suites your requirements
If this a form element then this would be set in your action = script which might call php server side function or another js function or set of functions depending
I hope some may benefit from suggestions made to date
Its a huge subject to take in just on its own and will take you some time so that you understand what your doing , "Patience , this doesn't come in a day , 21 days or even a year 2 , 3 ,5, 10 , little do some perceive despite fast track and apps supposedly that do this all for you "
Hand coding will always be far the best approach to this
That is the only way to become decent professionals
"Often the best learning comes from the hardest of experiences "
Have a good day
