Nate's Sweet Button

by nathanziarek

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<button>Hello</button>

CSS

button {
    background: red;
    border: #bb0000 1px solid;
    padding: 10px 15px;
    color: #fdd;
    position: relative;
    -webkit-transition: color 500ms ease;
}
button:after {
    content: "\f110";
    width: 100%;
    position: absolute;
    top: -50%;
    left: 0;
    color: blue;
    margin-top: -6px;
    -webkit-transition: top 500ms ease, opacity 700ms ease;
    opacity: 0;
    font-family: FontAwesome;
}
button.loading {
    color: transparent;
}

button.loading:after {
    top: 50%;
    opacity: 1
}

JavaScript

$("button").click( function() { 
    $(this).toggleClass("loading");
});