Back then, people also liked to make buttons with pictures, but nowadays it is important to consider the speed of the page. If you then have so many buttons that are also with pictures, you suffer a loss of the page, because you will also have pictures that describe the article and everything. So you would have numerous pictures on one page that slow down our page.
Button css style would not really slow down our site but would do everything much faster if we used pictures. Nowadays we can style the buttons with CSS very well, even with various effects.
Button CSS styling
I'll show you a few examples of how we can style our buttons with CSS. For this we can use a button or other elements such as the HTML a tag, because this can act exactly like a button. With a button itself, we would still have to reset and that would be more work.
0 <button>Click me</button> To reset a button you would have to set the button completely to zero, i.e. remove everything and that for every browser. It could look something like this, but you would have to test it for every browser and see if it helps anywhere. What we would not have the problem with the a element.
0 /* Reset Button CSS */ 1 button { 2 3 font-size: 1rem; 4 border-radius: 0; 5 border: 0; 6 box-shadow: none; 7 cursor: pointer; 8 } 9 10 button:focus { 11 12 outline: none; 13 } We also have to use some stylesheet for the a element to make it a button, the two elements behave differently. Therefore we can also reset the a element to make it a nice button.
0 <a href="#">Click me</a> After resetting, both elements should now look almost the same, but as already mentioned, this can differ from browser to browser.
0 /* Reset a tag */ 1 a { 2 font-family: Sans-Serif; 3 font-size: 1rem; 4 text-decoration: none; 5 color: #000; 6 } But you can see even if it is not so much that it takes a little less to reset an element than a button, but with a CSS button it can still happen that some browser adds something that we have not considered.
Styles Button CSS
Now we know what to look for in the two elements and can go to style the button with CSS. There are no limits to your creativity and you can let off steam.
0 button { 1 2 font-size: 1rem; 3 border-radius: 0; 4 border: 0; 5 box-shadow: none; 6 cursor: pointer; 7 color: #000; 8 border: 1px solid #000; 9 border-radius: 5px; 10 padding: 10px 30px; 11 } 12 13 button:focus { 14 15 outline: none; 16 } 17 18 button:hover { 19 20 color: green; 21 border-color: green; 22 box-shadow: 1px 1px 2px green; 23 } 0 a { 1 2 font-family: Sans-Serif; 3 font-size: 1rem; 4 text-decoration: none; 5 color: #000; 6 border: 1px solid #000; 7 border-radius: 5px; 8 padding: 10px 30px; 9 } 10 11 a:hover { 12 13 color: green; 14 border-color: green; 15 box-shadow: 1px 1px 2px green; 16 } This is a simple example and can be applied to both elements as we style button CSS. You could also merge the two styles and use less.
0 a, button { 1 2 font-family: Sans-Serif; 3 font-size: 1rem; 4 border-radius: 0; 5 border: 0; 6 box-shadow: none; 7 text-decoration: none; 8 cursor: pointer; 9 10 color: #000; 11 border: 1px solid #000; 12 border-radius: 5px; 13 padding: 10px 30px; 14 } 15 16 button:focus { 17 18 outline: none; 19 } 20 21 a:hover, button:hover { 22 23 color: green; 24 border-color: green; 25 box-shadow: 1px 1px 2px green; 26 } 27 28 a:active, button:active { 29 30 box-shadow: 1px 1px 2px green inset; 31 } With active, we can also make sure that when you click on the css button change and expand our effect. The whole thing would look like this, however, we should not address the elements directly when using button css, but should use class names to generate different buttons.
Advertising