Button Set 2 (ala bootstrap)

by gk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- default -->
<a class="btn" href="#"><i class="fa fa-download">&nbsp;&nbsp;</i>Download</a> 
<!-- b -->
<a class="btn btn_b" href="#"><i class="fa fa-download">&nbsp;&nbsp;</i>Download</a> 
<!-- c -->
<a class="btn btn_c" href="#"><i class="fa fa-download">&nbsp;&nbsp;</i>Download</a> 
<!--d -->
<a class="btn btn_d" href="#"><i class="fa fa-download">&nbsp;&nbsp;</i>Download</a>

CSS

body {
    margin:20px;
}
.btn, .btn_2 {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    text-decoration:none;
    color:#E7777D;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    background-image: none;
    border: 1px solid #E7777D;
    border-radius: 4px;
}
.btn.active, .btn.focus, .btn:active, .btn:focus, .btn:hover {
    color: #f5f5f5;
    background-color: #E7777D;
    border-color: #ccc;
}
.btn_b {
    border: 1px solid #ccc;
    color:#ccc;
}
.btn_b.active, .btn_b.focus, .btn_b:active, .btn_b:focus, .btn_b:hover {
    color: #555;
    background-color: #f5f5f5;
    border-color: #ccc;
}
.btn_c {
    color: #555;
    background-color: #f5f5f5;
    border-color: #ccc;
}
.btn_c.active, .btn_c.focus, .btn_c:active, .btn_c:focus, .btn_c:hover {
    border: 1px solid #ccc;
    color:#ccc;
}
.btn_d {
    background-color: #E7777D;
    border: 1px solid #ccc;
    color:#ccc;
}
.btn_d.active, .btn_d.focus, .btn_d:active, .btn_d:focus, .btn_d:hover {
    border-color: #777;
}