Add Custom Styling to a Button Using CSS

No one likes the outdated and ugly look of the default HTML button. Luckily, it is very simple to add your own styling to buttons using CSS (cascading style sheets). In the example below we will demonstrate how this can be done:


Here we have an HTML button with a class called demoButton. We will use this class in our CSS section to style the button.

<button class="demoButton">My Button</button>


In the CSS code, we added the desired properties and values to apply to our button. In addition to the default values, we added a hover style to change the look when the mouse is hovered over the button. Check out the live demo section to see how the button turned out.

   border: none;
   color: white;
   border: none;
   box-shadow: 0 0 10px #bbb;


The Live Demo


You may also like...

3 Responses

  1. Jason Huynh says:

    wow, I have to use this technique on my own web projects. Thank you so much! You are truly a web design genius.

  2. JenniferJeny says:

    Such a great and simple technique. Quite easy to understand this kind of coding.

Leave a Reply

Your email address will not be published. Required fields are marked *