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 expand btn-icon" href="#"><i class="fa fa-shopping-cart"></i><span>Add To Cart</span></a>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600, 400, 300);
 body {
    padding: 60px;
}
/* Button */
 .btn {
    margin:6px;
    clear: both;
    white-space: nowrap;
    font-family:"Open Sans", "Helevtica";
}
/* Button elements */
 .btn > span, .btn-icon > i {
    display: inline-block;
    transition: 0.25s all;
    line-height: 2.5rem;
    padding: 0 12px;
}
.btn > span {
    color: #FFF;
    background: #3498DB;
    font-size: 0.77rem;
    font-family:"Open Sans", Helvetica Neue, Roboto, Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
.btn:hover > span, .btn:focus > span {
    background: #217BB8;
}
.btn:active > span {
    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";
}

JavaScript

$(document).foundation();