Font-Awesome Chunky 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</a>

CSS

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;


     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 {
    position: relative;
    display: block;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
    z-index: 10;
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
     -webkit-transition: background-color 300ms ease-out;
     -moz-transition: background-color 300ms ease-out;
     transition: background-color 300ms ease-out;
     -webkit-appearance: none;
    box-shadow: inset 0 -4px #568D33, inset 0 1px white;
}

.dbl-button:active {
    padding: 15px 0 12px;
    top: 3px;
    box-shadow: inset 0 -2px #568D33, inset 0 1px white, inset 6px 0 10px -2px rgba(0, 0, 0, 0.2);
}

 dbl-button:hover, dbl-button:focus, .dbl-button:hover, .dbl-button:focus {

 }

 dbl-button:hover, dbl-button:focus, .dbl-button:hover, .dbl-button:focus {

     color: white;

 }



 
 dbl-button.green, .dbl-button.green {

     background: linear-gradient(to bottom, #8DE579 0%, #74CE39 3%, #42A715 100%) repeat scroll 0% 0% transparent;

     border: 1px solid #2F8B13;

     border-top-color: rgba(40, 119, 16, 0.5);

     border-bottom-color: rgba(17, 109, 3, 0.9);

     color: #FFF;

   ...