Toggle Buttons

Toggle buttons using images and transitions

by Steven Hylands

HTML

<div class="toggle">ghhg </div>
<div class="toggle2"><span></span></div>

CSS

body { margin: 20px; }

div,span {
    -moz-user-select: none;  
    -webkit-user-select: none;  
    -ms-user-select: none;
}

.toggle {
    width: 111px;
    height: 40px;
    border-radius: 6px;
    background: url('http://dl.dropbox.com/u/6913105/toggle.png') repeat-x;
    -webkit-transition: background-position 0.2s ease-in;
}

.toggle.on {
    width: 111px;
    background-position: -53px 0;
}

.toggle2 {
    margin: 20px 0;
    height: 40px;
    width: 115px;
    background: url('http://dl.dropbox.com/u/6913105/toggle2a.png') repeat-x;
}
.toggle2 span {
    display: block;
    position: relative;
    left: 1px;
    height: 40px;
    width: 58px;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform 0.15s ease-in;
    background: url('http://dl.dropbox.com/u/6913105/toggle2b.png') no-repeat;
}
.toggle2 span.on2 {
    -webkit-transform: translate3d(54px,0,0);
}

JavaScript

$('.toggle').bind("touchstart",function() {
    $('.toggle').toggleClass('on');
});

$('.toggle2').bind("touchstart",function() {
    $('.toggle2 span').toggleClass('on2');
});