Foundation 5 Buttons Override

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>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<div class="row">
    <div class="large-12 columns"> <a class="button expand">Large Button</a>  <a class="button large">Large Button</a>  <a class="button">Default Button</a>  <a class="button preicon">Default Preicon Button</a>  <a class="button lined">Lined Button</a>  <a class="button small">Small Button</a>
 <a class="button small preicon">Small Preicon Button</a>  <a class="button tiny">Tiny Button</a>  <a class="button tiny preicon">Tiny Preicon Button</a> 
    </div>
</div>

CSS

body {
    padding: 60px;
}
button, .button {
    border-style: solid;
    border-width: 0px;
    cursor: pointer;
    font-family:"Open Sans", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    display: inline-block;
    padding-top: 0.475rem;
    padding-right: 0.775rem;
    padding-bottom: 0.4875rem;
    padding-left: 0.775rem;
    font-size: 0.9rem;
    background-color: #e8522f;
    border-color: #c93816;
    color: white;
    transition: background-color 300ms ease-out;
}
button:hover, button:focus, .button:hover, .button:focus {
    background-color: #c93816;
}
button:hover, button:focus, .button:hover, .button:focus {
    color: white;
}
button.secondary, .button.secondary {
    background-color: #e9e9e9;
    border-color: #bababa;
    color: #333333;
}
button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
    background-color: #bababa;
}
button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
    color: #333333;
}
button.success, .button.success {
    background-color: #5da423;
    border-color: #4a831c;
    color: white;
}
button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
    background-color: #4a831c;
}
button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
    color: white;
}
button.alert, .button.alert {
    background-color: #c60f13;
    border-color: #9e0c0f;
    color: white;
}
button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
    background-color: #9e0c0f;
}
button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
    color: white;
}
button.warning, .button.warning {
    background-color: #f08a24;
   ...

JavaScript

$(document).foundation();