Transiciones y Transformaciones en Botones (CSS3 y HTML5)

Enlarge

El caso

Hace un tiempo elaboré un juego interactivo donde utilicé algunos botones que hacen un simple pero atractivo efecto over, es decir, cuando el usuario coloca el puntero del mouse sobre ellos, y un par de personas me preguntaron si esos botones y su efecto habían sido “dibujados” directamente en el elemento canvas, a lo que contesté que no, que en realidad cada botón era un enlace común y corriente utilizando el elemento para hace un enlace “<a></a>” de HTML. Una de estas personas comentó que por lo general solo veía ese tipo de efectos tan “smooth” en cosas realizadas con Flash, a lo cual solo añadí: pues no solo no es Flash sino que tampoco es un elemento del canvas de HTML5, el secreto es el uso de transiciones y transformaciones de CSS3 (aquí las especificaciones oficiales).

Paso No. 1

En su página coloque un enlace HTML, así es, un llano <a href=”” ></a> en el lugar donde usted desee. Para efectos de este ejemplo utilizaré el siguiente código:

<a id="miBoton" href="http://internet80.com"></a>

Paso No. 2

Ahora hay que colocar un par de elementos <span>, el primero servirá para colocar la imagen del botón en estado off (normal o apagado) y el segundo para la imagen que corresponde al estado over:

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

Los siguientes pasos consisten en crear estilos CSS3 que manipulen el comportamiento del enlace y los span dentro de él.

Paso No. 3

El siguiente estilo hace referencia al enlace, se indica que este se debe desplegar en bloque y no in-line y especifica ancho y alto:

#miBoton {
   display: block;
   width: 141px;
   height: 195px;
}

Paso No. 4

Ahora se indicará que imagen debe utilizar el fondo de cada span, note que sólo utilizo una imagen para ambos span. Recuerde que puede usar la imagen de su preferencia pero manipule las dimensiones de tamaño apropiadamente según el caso:

#miBoton span {
   background-image: url(http://internet80.files.wordpress.com/2013/04/btn_ok.png);
}

Si se verifica el resultado del código como está hasta ahora no visualizará nada, por lo que al igual que se especificó un estilo de bloque y tamaño al enlace, ahora se debe hacer lo mismo con cada span

#miBoton .off {
   display: block;
   width: 141px;
   height: 195px;
}
[/sourcecode]
[sourcecode language="css"]
   #miBoton .over {
   display: block;
   width: 141px;
   height: 195px;
   background-position: 0 -195px;
}

Enlarge

Paso No. 5

Por ahora ambos span muestran su respectivo contenido uno después de otro, pero lo que en realidad se desea es que ambos ocupen el mismo espacio, por lo que especificará la posición de ellos en la esquina superior izquierda con left y top:

#miBoton span {
   background-image: url(http://internet80..com/downloads/btn_ok.png);
   position: absolute;
   left: 0; top: 0;
}

Si visualiza y observa el progreso hasta ahora verá que solo aparece el estado over en su página, esto es debido a que el segundo span se sobrepone al primero, por lo que hay que indicar que el primero deber ser el inicial y el que debe estar arriba, para ello usamos la propiedad z-index en el estilo para #miBoton .off, entre más alto el valor z-index colocará al elemento referido más al frente:

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

Paso No. 6

Ahora utilizará el estado hover de CSS, lo cual asigna el estilo indicado cuando se coloca el puntero del mouse sobre el elemento referido, que en este caso es el span .off

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

Con esto se logra un comportamiento comparable al que se hubiera podido lograr dando solo un par de estilos a un elemento <button>, sin embargo es a partir del siguiente paso donde se demuestra la “magia”.

Paso No. 7

Si observamos el comportamiento del botón hasta ahorita se ve un cambio instantáneo entre el estado off y over, para hacer un cambio suave se utilizará un transición, lo que evitará el cambio rápido en los estados hover CSS3 de ambos span, de manera que nuevamente afectaremos el estilo para #miBoton span agregando la transición transition: opacity .25 ease-in-out:

#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;
}

Tenga en cuenta que es solo una transición la que está agregando, las líneas con los prefijos -webkit-, -moz-, etc., son solo para aumentar la compatibilidad de la transición a los navegadores más populares.

Paso No. 8

Visualice su botón y ahora verá una mucho más suave y elegante transición entre los estados off y over. Pero hagamos las cosas más interesantes, combine un transición con una transformación, en este caso hará que el estado over aumente de tamaño del botón añadiendo el siguiente estilo:

#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);
}

Paso No. 9

#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;
}

Nota

Para colocar el botón en su página puede utilizar elementos contenedores como por ejemplo un <div>, también puede propagar los estilos a más botones utilizando selectores CSS3 y/o clases en lugar de un ID como se hizo en este ejemplo para fines prácticos.

Conclusión.

El botón fue creado fácilmente sin la necesidad de ningún plug-in (como el Flash Player) y no se utilizó una pizca de programación JavaScript, lo que hace treméndamente eficiente, rápida y ligera esta implementación CSS3, mientras que al mismo tiempo logró convertir un enlace simple en un elegante botón. Si desea la reseña técnica dónde del juego donde implementé ese botón está aquí:

Emmanuel Herrera

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.

Some certifications include: PSM, PSPO, SSM.