Buttons DEMO v1

by surfine

HTML

<button class="example1">Click Me!</button><br /><br /><br />
<button class="example2">Button with shadow</button><br /><br /><br />
<button class="example3">Circular</button><br /><br /><br />
<button class="example4">Circular with shadow</button><br /><br /><br />
<div class="example5">
    <span class="on">ON</span>
    <span class="off">OFF</span>
</div>

CSS

button, div {
    font-family: Arial;
}
.example1 {
    width: 100px; height: 50px; /* or you can use padding */
    color: #FFF;
    background: #0F4BFF;
    border: 1px solid #014BFF;
    -webkit-border-radius: 4px;
    -mox-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 0 #0037DB;
    -moz-box-shadow: 0 6px 0 #0037DB;
    box-shadow: 0 6px 0 #0037DB;
}
.example1:active {
    position: relative;
    top: 6px; /* this makes sure the button is pressed down */
    -webkit-box-shadow: 0 2px 0 #0037DB;
    -moz-box-shadow: 0 2px 0 #0037DB;
    box-shadow: 0 2px 0 #0037DB;
}
.example2 {
    width: 100px; height: 50px;
    color: #FFF;
    background: #0F4BFF;
    border: 1px solid #014BFF;
    -webkit-border-radius: 4px;
    -mox-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 0 #0037DB,
        0 10px 10px #2a2a2a;
    -moz-box-shadow: 0 6px 0 #0037DB,
        0 10px 10px #2a2a2a;
    box-shadow: 0 6px 0 #0037DB,
        0 10px 10px #2a2a2a;
}
.example2:active {
    position: relative;
    top: 6px;
    -webkit-box-shadow: 0 2px 0 #0037DB,
        0 3px 3px #2a2a2a;
    -moz-box-shadow: 0 2px 0 #0037DB,
        0 3px 3px #2a2a2a;
    box-shadow: 0 2px 0 #0037DB,
        0 3px 3px #2a2a2a;
}
.example3 {
    width: 100px; height: 80px;
    color: #FFF;
    background: #0F4BFF;
    border: 1px solid #014BFF;
    -webkit-border-radius: 50%;
    -mox-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 6px 0 #0037DB;
    -moz-box-shadow: 0 6px 0 #0037DB;
    box-shadow: 0 6px 0 #0037DB;
}
.example3:active {
    position: relative;
    top: 6px;
    -webkit-box-shadow: 0 2px 0 #0037DB;
    -moz-box-shadow: 0 2px 0 #0037DB;
    box-shadow: 0 2px 0 #0037DB;
}
.example4 {
    width: 100px; height: 80px;
    color: #FFF;
    background: #0F4BFF;
    border: 1px solid #014BFF;
    -webkit-border-radius: 50%;
    -mox-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 6px 0 #0037DB,
       ...

JavaScript

$(document).ready(function() {
    $('.on').addClass('on-active');
    $('.off').removeClass('off-active');
});
$('.on').click(function() {
    $(this).addClass('on-active');
    $('.off').removeClass('off-active');
});
$('.off').click(function() {
    $(this).addClass('off-active');
    $('.on').removeClass('on-active');
});