Transition and Transformation Button

Normal link transformed in an easy but cool button using CSS3 transitions and trasnformations

by flashwolver

HTML

<div>
    <a id="miBoton" href="http://internet80.com" >
          <span class="off"></span>
          <span class="over"></span>    
    </a>
</div>

CSS

div{
	position:absolute;
	width: 300px;
	height: 300px;

}

#miBoton {
    display: block;    
    width: 14px;
    height: 19px;             
}

#miBoton span { 
	background-image: url(http://internet80.com/downloads/btn_ok.png);
	position: absolute;
	left: 0; top: 0;
	-webkit-transition: opacity .25s ease-in-out;
	   -moz-transition: opacity .25s ease-in-out;
		-ms-transition: opacity .25s ease-in-out;
		 -o-transition: opacity .25s ease-in-out;
			transition: opacity .25s ease-in-out; 	    
}

#miBoton .off {	
    display: block;
    width: 141px;
    height: 195px;
    z-index: 2;
}

#miBoton:hover .off { 
    opacity: 0; 
    filter: alpha(opacity = 0);
}

#miBoton .over {	
    display: block;
    width: 141px;
    height: 195px;
    background-position: 0 -195px;
	-webkit-transition: -webkit-transform .25s ease-in-out;
	   -moz-transition:    -moz-transform .25s ease-in-out;
		-ms-transition:     -ms-transform .25s ease-in-out;
		 -o-transition:      -o-transform .25s ease-in-out;
			transition:         transform .25s ease-in-out;    
}

#miBoton:hover .over {
	-webkit-transform: scale(1.03,1.03);
	   -moz-transform: scale(1.1,1.1);
		-ms-transform: scale(1.1,1.1);
		 -o-transform: scale(1.1,1.1);
			transform: scale(1.1,1.1);
}