CSS3 give us the the ability to make some effects faster and easier than making it in Photoshop then exporting as an image and add it to the CSS… So, In this tutorial I’m going to show you how to create button using the new CSS3 techniques.

What’s the trick!

We are going to use this simple CSS3 methods:
1. Round Box
2. Gradients
3. Text Shadow

Make Rounded Box

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;

Add Some Padding

padding:6px 24px;
display:inline-block;

Coloring The Box And Adding Some Gradient

background-color:#bddbfa;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');

Style The Text

color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;

Style The Text

color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;

Add Hover Effect (:hover)

All what we will do here is copy the box coloring part above and reverse the colors

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
background-color:#80b5ea;

Add OnClick Effect (:active)

background:none;
background-color:#bddbfa;
text-shadow:none;

The Complete Css Code

.button {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;

padding:6px 24px;
display:inline-block;

background-color:#bddbfa;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');

color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;
}

.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
background-color:#80b5ea;
}

.button:active {
background:none;
background-color:#bddbfa;
}

Html Code

<a href="Your_Link" class="button">Click Here!</a>