4 Cool CSS Buttons

Today we are going to show you how to give your CSS buttons a bit more of a fancier design. Using simple CSS we can make our buttons stand out from ordinary buttons, giving them that extra style we want for our webpages.


We’ll start this tutorial by looking at the HTML code required to display these new buttons.

<button class="newbutton">New Button</button>
<button class="newbutton red">New Button</button>
<button class="newbutton green">New Button</button>
<button class="newbutton black">New Button</button>

As you can see, we are just using a class of ‘newbutton’ to create this effect, plus on the last three lines we have added a new color to our buttons.

Now the fun begins, here is the CSS required to style our new buttons, we’ll look at some of the properties and what they are used for below the code.

.newbutton {
  height: 38px;
  text-align: center;
  border-radius: 28px;
  background: #13b5ea;
  background: -moz-linear-gradient(top, #13b5ea, #0f91bb);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#13b5ea), to(#0f91bb));
  background: -webkit-linear-gradient(top, #13b5ea, #0f91bb);
  background: -o-linear-gradient(top, #13b5ea, #0f91bb);
  background: linear-gradient(to bottom, #13b5ea, #0f91bb);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  line-height: 28px;
  margin: 5px 0;
  padding: 0 20px;
  border: 5px solid #c8e6f0;
}

height – This property is going to set the height of our button to 38px.
text-align – Here we want our text to align in the center of the button.
border-radius – You can change this value to alter the radius of the button.
background – This will set the background of the button, and if supported by the user browser, will also set the background gradient.
transition – This property is used for our hover effect, code is below.
padding – Using ‘0 20px’ will give our button padding at the left and right of 20px. Top and bottom is 0.
border – Gives the button a border of 5px

The following CSS code is used to change the color of our button, you could easily add further colors by changing the hex values.

.newbutton.red {
  background: #B33333;
  background: -moz-linear-gradient(top, #B33333, #800000);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#B33333), to(#800000));
  background: -webkit-linear-gradient(top, #B33333, #800000);
  background: -o-linear-gradient(top, #B33333, #800000);
  background: linear-gradient(to bottom, #B33333, #800000);
  border: 5px solid #FFCCCC;
}
.newbutton.green {
  background: #33B3B3;
  background: -moz-linear-gradient(top, #33B3B3, #008080);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#33B3B3), to(#008080));
  background: -webkit-linear-gradient(top, #33B3B3, #008080);
  background: -o-linear-gradient(top, #33B3B3, #008080);
  background: linear-gradient(to bottom, #33B3B3, #008080);
  border: 5px solid #CCFFFF;
}
.newbutton.black {
  background: #7F7F7F;
  background: -moz-linear-gradient(top, #7F7F7F, #333333);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#7F7F7F), to(#333333));
  background: -webkit-linear-gradient(top, #7F7F7F, #333333);
  background: -o-linear-gradient(top, #7F7F7F, #333333);
  background: linear-gradient(to bottom, #7F7F7F, #333333);
  border: 5px solid #CCCCCC;
}

Lastly we have the CSS code that will be used when will hover over the button.

.newbutton:hover {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-color: #ffffff;
}

With the code above, when the user hovers over our new button, we’ll be changing our border to white plus we’ll be giving our button a box shadow of black with a blur of 10px plus to give a nice soft effect, the color has an opacity of 20%.

That’s it for this post, as usual here is a link to a demo of the project where can play with the values to see what effects it will have on the final look of the buttons.

Demo