Button CSS styling with HTML

Last Updated : |  

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.

    // CSS CODE
       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.

      // HTML CODE
         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.

        // CSS CODE
           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.

          // CSS CODE
             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  } 

            // CSS CODE
               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.

              // CSS CODE
                 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.


                Your Comment

                * This fields are required, email don't publish

                This field is optional
                Fill this field link your name to your website.

                Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

                I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
                tnado © 2020 | All Rights Reserved
                In cooperation with Hyperly