Creating Simple Buttons with CSS and HTML

In this article, I'll teach you how to create a simple button using html and css.
First part: Type in the html code below into your text editor, save as button.html

<link rel="stylesheet" type="text/css" href="button.css">
<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

Second part: Type in the css code below into your text editor, save as button.css

 .button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.green {
    color: #3e5706;
    background: #a5cd4e;
}
/* Blue color */
.blue {
    color: #19667d;
    background: #70c9e3;
}
/* Gray Color */
.gray {
    color: #515151;
    background: #d3d3d3;
}

When you open the button.html file in your web browser, you should get buttons similar to the ones below:

 Image Credits:  http://bhtdownloads.com, +BThemesandTricks