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:

 

The HTML
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>

 

The CSS
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.

.demoButton
{
   background-color:#ddd;
   border: none;
   color: white;
   border-radius:5px;
   font-size:20px;
}
.demoButton:hover{
   background-color:red;
   border: none;
   box-shadow: 0 0 10px #bbb;
}

 

The Live Demo

 

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg this

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 *