Botones con estilo

by Carlos Quintero

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button class="button blue">
<i class="fa fa-search"></i> Buscar
</button>
<button class="button dark">
<i class="fa fa-search"></i> Buscar
</button>
<button class="button blue">
<i class="fa fa-search"></i> Buscar
</button>
<button class="button dark">
<i class="fa fa-search"></i> Buscar
</button>

CSS

.button{
    background: #7f8c8d;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    margin: 5px 5px;
    padding: 4px 5px;
    text-align: center;

    text-decoration: none;
    box-shadow: 0px 3px 0px #373c3c;
    border:none;
}
 
/*Colores botones */
.button.blue{
    background: #3498db;
    box-shadow: 0px 3px 0px #266792;
}
.button.dark{
    background: #2c3e50;
    box-shadow: 0px 3px 0px #266152;
}