Button sample

by nathanziarek

HTML

<p>Click the button to see the "loading" action</p>
<button>Submit</button>

CSS

button {
    background: -webkit-linear-gradient(#336699, #4477aa);
    color: white;
    padding: 8px 15px;
    border-radius: 2px;
    border: none;
    position: relative;
}

button:after {
    -webkit-transition: linear 250ms all;
    opacity: 0;
    content: "•";
    position: absolute;
    background: -webkit-linear-gradient(#336699, #4477aa);
    height: 100%;
    top: 0;
    left: 0;
    line-height: 100%;
    border-radius: 2px;
    border: none;
    width: 100%;
    zoom: 1.5
}
button.loading:after {
    opacity: 1;
    zoom: 1
}

JavaScript

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