Transiciones y Transformaciones en Botones

css3_logo

Hace unos días 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 “<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 que es algo elaborado gracias a las transiciones y transformaciones de CSS3 (que también es parte de HTML5).

Hay muchos tutoriales y capítulos en los libros de HTML5 para quienes deseen aprender paso a paso de que van las transiciones en CSS3 (incluyendo mio), así que en esta ocasión me concentraré en el flanco práctico y aplicado para lograr hacer botones con un efecto como los que utilicé en el juego que mencioné inicialmente (si alguien desea ver los botones y el juego en acción: http://www.youtube.com/watch?v=SY7HSSH6Ke4).

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:

[sourcecode language=”html”]
<a id="miBoton" href="http://internet80.com"></a>
[/sourcecode]

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:

[sourcecode language=”html”]
<a id="miBoton" href="http://internet80.com"></pre>
<span class="off"></span>
<span class="over"></span>
<pre></a>
[/sourcecode]

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:

[sourcecode language=”css”]
#miBoton {
display: block;
width: 141px;
height: 195px;
}
[/sourcecode]

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:

[sourcecode language=”css”]
#miBoton span {
background-image: url(http://internet80.files.wordpress.com/2013/04/btn_ok.png);
}
[/sourcecode]

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

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

Observe como al segundo span se le indica mover el área desplegada del imagen de fondo a -195, a las imágenes que contienen varios cuadros o estados  dentro de ellas mismas y se les manipula mediante su posición y visibilidad se les suele llamar sprites  (tenga esto en mente si desea desarrollar juegos)Hasta este punto lo visualizará será algo como esto:

 btn_ok

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:

[sourcecode language=”css”]
#miBoton span {
background-image: url(http://internet80.files.wordpress.com/2013/04/btn_ok.png);
position: absolute;
left: 0; top: 0;
}
[/sourcecode]

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:

[sourcecode language=”css”]
#miBoton .off {
display: block;
width: 141px;
height: 195px;
z-index: 2;
}
[/sourcecode]

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

[sourcecode language=”css”]
#miBoton:hover .off {
opacity: 0;
filter: alpha(opacity = 0);
}
[/sourcecode]

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 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:

[sourcecode language=”css”]
#miBoton span {
background-image: url(http://internet80.files.wordpress.com/2013/04/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;
}
[/sourcecode]

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:

[sourcecode language=”css”]
#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);
}
[/sourcecode]

Paso No. 9

El botón está casi listo, ahora el cambio de tamaño sucede pero instantáneamente sin embargo ya conoce la técnica para evitarlo (Paso 7), así es, usará una transición para hacer el cambio de tamaño lentamente utilizando  transition:  transform .25s ease-in-out; , pero ahora no quiere afectar ambos span sino solo el over por lo que el destino adecuado para la transición es #miBoton .over :

[sourcecode language=”css”]
#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;
}
[/sourcecode]

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 ver el código en acción puede verlo aquí.

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

Leave Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: