Foundation 5 Metro Buttons

by Charles Butler

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<a class="btn btn-icon" href="#">Add To Cart</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600, 400, 300);
 body {
    padding: 60px;
}
/* Button */
 .btn {
    position: relative;
    margin:6px;
    clear: both;
    font-family:"Open Sans", "Helevtica";
        color: #FFF;
    background: #3498DB;
    font-size: 0.77rem;
    font-family:"Open Sans", Helvetica Neue, Roboto, Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.25s all;
    line-height: 2.5rem !important;
    display: inline-block;



}
/* Button elements */
 .btn > span, .btn-icon > i {
    display: inline-block;
    transition: 0.25s all;
    line-height: 2.5rem;
    padding: 0 12px;
}

.btn:hover, .btn:focus {
    background: #217BB8;
    color: #FFF;
}
.btn:active {
    background: #217BB8;
    transition: none;
}
/* Button with an icon */
 .btn-icon > i.fa {
    background: #31353D;
    position: relative;
    font-style: normal;
    color: white;
    font-size: 1.4rem;
    vertical-align: bottom;
}
.btn-icon:hover > i, .btn-icon:focus > i {
    color: #ddd;
    background: #272A31;
}
.btn-icon:hover > i:before, .btn-icon:focus > i:before {
    font-family:'FontAwesome';
    content:"\f217";
}


.btn:before {
    font-family:'FontAwesome';
    content:"\f217";
    background: #222;
    display: inline-block;
    transition: 0.25s all;
    line-height: 2.5rem;
    padding: 0 12px;
    background: #31353D;
    position: relative;
    font-style: normal;
    color: white;
    font-size: 1.4rem;
    vertical-align: bottom;
}

JavaScript

$(document).foundation();