How to Style a Button in CSS

Updated on August 10, 2015     Kisan Patel

In this article, we’re going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common actions like download, upload, log in/out, submit and so on. A good button design enhances usability.

Setting up the HTML

Here is the basic HTML that looks like this:

<a class="button" href="#">Anchor Button</a>
<button class="button">Button Tag</button>
<input class="button" type="submit">

Setting up the CSS

The CSS code will look like this:

.button{
  border-radius: 0.5em; /* increased border-radius */
  border: 0;
  text-decoration: none;
  color: white; /* changed text color to white */
  padding: 1em 3em; /* increased padding for a larger button */
  background-color: #329bd8; /* changed background color to a nice blue*/
  text-transform: uppercase; /* made the text uppercase */
  font-weight: bold; /* gave the text a bold look */
}

The hover state can be achieved by adding :hover pseudo class like below:

.button:hover {
   background-color: transparent; /* changed the bg-color to transparent */
   border: 0.15em #329bd8 solid; /* set a border to a blue color */
   color: #329bd8; /* set a text color to the same color */
}

The active state can be achieved by adding :active pseudo class like below:

.button:active {
   background-color: transparent;
   border: 0.15em #5e8ca5 solid;
   color: #5e8ca5; /* minor text color change in a deeper blue */
}