Spritesheet Button Example

HTML

<div class="btn"></div>

<hr>
    
<div class="btn2"></div><label>Off</label>

CSS

.btn {
    width: 40px;
    height: 50px;
    overflow: hidden;
    background: url('http://alignedleft.com/blog/wp-content/uploads/2010/07/Amazing-Button-Border-Sprite.png');
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}

.btn:hover {
    background-position: 0 -50px;
}


.btn2 {
    float: left;
    width: 40px;
    height: 50px;
    overflow: hidden;
    background: url('http://alignedleft.com/blog/wp-content/uploads/2010/07/Amazing-Button-Border-Sprite.png');
    cursor: pointer;
}

.btn-on {
    background-position: 0 -50px;
}

label {
    line-height: 50px;
}

JavaScript

$('.btn2').click(function() {
   
    if( $(this).hasClass('btn-on') ) {
     
        $('label').text('Off');
        $(this).removeClass('btn-on');
        
    } else {
        
        $('label').text('On');
        $(this).addClass('btn-on');
        
    }
    
    
});