Creating Simple and Beautiful buttons with CSS

The following is the CSS code to style links as buttons with rounded corners and shadow effect:

.button{
display: inline-block;
font-family:  Verdana, Geneva, sans-serif;
        font-size: 11px;
padding: 5px 10px 6px;


        width: 60px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
cursor: pointer;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align:center;
}

The above CSS snippet will make the link look like a button with rounded corners and now we will add CSS to make buttons of different sizes.

.small_button {
     font-size: 11px;
     width:60px;
     line-height:15px;
}
.medium_button {
    font-size: 13px;
    width:80px;
    line-height:18px;
}
.large.awesome {
   font-size: 14px; 
   width:130px;
   line-height:24px;
}

The following is the CSS to create different color buttons
.blue {
      background-color: #2daebf;
}
.red {
     background-color: #e33100;
}
.magenta {
     background-color: #a9014b;
}
.orange {
    background-color: #ff5c00;
}
.yellow {
    background-color: #ffb515;
}

The following is the HTML code to create buttons using the above styles:

<a href="#" class="button red">Button</a>

<a href="#" class="button blue medium_button">Button</a>

<a href="#" class="button orange large_button">Button</a>

<a href="#" class="button yellow">Button</a>

<a href="#" class="button magenta">Button</a>