Font-Awesome Buttons Large
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 green wide"><span class="icon-dbl-button"><i class="fa fa-cloud-download"></i></span> DOWNLOAD NOW<small>File Size: 172 kb/s</small></a>
<br><br>
<a class="dbl-button red wide"><span class="icon-dbl-button"><i class="fa fa-cloud-download"></i></span> DOWNLOAD NOW<small>App Store</small></a>
<br><br>
<a class="dbl-button purple wide"><span class="icon-dbl-button"><i class="fa fa-cloud-download"></i></span> DOWNLOAD NOW<small>App Store</small></a>
<br><br>
<a class="dbl-button blue wide"><span class="icon-dbl-button"><i class="fa fa-cloud-download"></i></span> DOWNLOAD NOW<small>App Store</small></a>
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;
background:#eee;
}
.dbl-button .icon-dbl-button i {
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
position: absolute;
left:0;
top:0;
border-right: 1px solid rgba(0, 0, 0, 0.2);
width:60px;
font-size: 2.5rem;
text-align: center;
font-weight: normal;
line-height: 56px;
-moz-box-shadow: 4px 0 4px -5px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 4px 0 4px -5px rgba(0, 0, 0, 0.15);
box-shadow: 4px 0 4px -5px rgba(0, 0, 0, 0.15), 0px 3px 0px rgba(0, 0, 0, 0.3);
background: rgba(50,50,50,0.4);
color: rgba(255,255,255,0.8);
}
.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;
border-style: solid;
border-width: thin;
cursor: pointer;
font-family:"Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: normal;
margin: 0 0 0.15rem 0;
position: relative;
text-decoration: none;
display: inline-block;
padding-right: 3.5rem;
padding-left: 5rem;
font-size: 1.25rem;
padding-top: 0.2625rem;
padding-bottom: 0.75rem;
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;
-moz-box-shadow: inset 0 0 7px...