Font-Awesome Buttons

by Charles Butler

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css">
<p>Good for profile page?</p>

<a class="dbl-button wide"><span class="icon-dbl-button"><i class="fa fa-plus"></i></span> Follow Me</a>

<br> 
    
    
<a class="dbl-button facebook wide"><span class="icon-dbl-button"><i class="fa fa-facebook"></i></span> Follow on Facebook</a>

<br> <a class="dbl-button twitter wide"><span class="icon-dbl-button"><i class="fa fa-twitter"></i></span> Follow on Twitter</a>

<br> <a class="dbl-button google wide"><span class="icon-dbl-button"><i class="fa fa-google-plus"></i></span> Follow on Google +</a>

<br>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600italic,700,400italic);

 body {
    font-family:"Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
}
.dbl-button .icon-dbl-button i {
    position: absolute;
    left:0;
    top:0;
    background: rgba(0, 0, 0, 0.09);
    width:40px;
    font-size: 1.3rem;
    padding-top: 0.3325rem;
    padding-bottom: 0.6rem;
    text-align: center;
    font-weight: normal;
    line-height: normal;
}
.dbl-button:hover .icon-dbl-button i {
    -webkit-box-shadow:inset -2px 0 2px -2px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:inset -2px 0 2px -2px rgba(50, 50, 50, 0.3);
    box-shadow:inset -2px 0 2px -2px rgba(50, 50, 50, 0.3);
}
.dbl-button.wide {
    min-width: 130px;
}
.dbl-button.expand {
    width: 100%;
}
dbl-button, .dbl-button {
border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.25s linear;
        -moz-transition: 0.25s linear;
    transition: 0.25s linear;
    overflow:hidden;
    border-style: solid;
    border-width: thin;
    cursor: pointer;
    font-family:"Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 0.15rem 0;
    position: relative;
    text-decoration: none;
    display: inline-block;
    padding-right: 3.5rem;
    padding-left: 3.5rem;
    font-size: 0.875rem;
    padding-top: 0.4625rem;
    padding-bottom: 0.4rem;
    border-radius: 4px;
    background-color: #2ecc71;
    color: white;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    -webkit-appearance: none;
    font-weight: normal !important;
}
dbl-button:hover, dbl-button:focus, .dbl-button:hover, .dbl-button:focus {
    background-color: #25a35a;
}
dbl-button:hover, dbl-button:focus, .dbl-button:hover, .dbl-button:focus {
    color: white;
}
dbl-button.teal, .dbl-button.teal {
    background-color: #008299;
    color:...