Buttons made with images

The effect does not use any CSS3 or HTML5 features, but I'll show you how the effect works.

a{
    background-image: url(http://levelupgames.uol.com.br/elsword/era-dos-herois/img/menu-vertical.png);
    background-repeat: no-repeat;
    background-position: -168px 0;
    display: block;
    color: #000;
    width: 168px;
    height: 48px;
    font-family: 'carter_oneregular';
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 43px;
}
a:hover{
    background-position: 0 0;
}
a:active{
    background-position: 0 -48px;
}
a.efeito{
    -webkit-transition: background-position 1s; /* Safari */
    transition: background-position 1s;
}

<a>Normal</a>
<hr>
<a class="efeito">"Câmera Lenta"</a>

The effect is to reposition the background image.

Intheelementbackground-positionofitissetto-168pxwhichishalfthewidthoftheimage,wherethegrayframesbeginandinthe:hoverruleitarrowsbackground-position:00;whichisatthebeginningoftheimage.

Animportantpointisthewidthandheight,whichshouldbethesizeoftheframeused,inthiscasewidth:168px;height:48px;.

ThistechniqueisknownasSprites,widely used in the development of 2D games , but also applied on the web.

You can read more about this Tableless post .

First you create an image with two transitions as in the example below:

 _______________
|+++++++++++++++|
|++++ligado+++++|
|_______________|
|---------------|
|---desligado---|
|_______________|

Let's imagine that this image has: 90px x 120px, that is, the horizontal half of it equals 60px.

<style> 
#elemento a {
   background: url('url_da_imagem.jpg') top left no-repeat;
   width: 90px;
   height: 60px;
   display:block;
   border: 1px solid #000;
}
#elemento a:hover {
   background: url('url_da_imagem.jpg') bottom left no-repeat;
}
#elemento span {
 display:none;
}
</style>

Note that the image has been repositioned in the css, from [top] to [bottom] respecting the area of the half size of the image:

<div id="elemento">
   <a href="#"><span>ligado | desligado</span></a>
</div>

You can also instead use top, and bottom, to use a number relative to the size, type: from [0px] to [-60px].