BrainSINS técnico: Botón CSS con efecto de profundidad

2 Comments

El objetivo del post de hoy es poder crear un botón CSS con efecto de profundidad tras pulsarlo, con las siguientes restricciones:
-No se puede utilizar Javascript.
-No se puede utilizar el elemento button.
-No podemos utilizar el elemento

Para ello usaremos dos técnicas de diseño:

Skeumorfismo: que intenta acercar el mundo real al digital, a través de diseños, que consigan simular determinadas acciones, como por ejemplo:

  • En el iPad cuando pasamos de página al leer un eBook, vemos un efecto muy cercano al real, con el pliegue de la hoja.
  • Al pulsar un botón que veamos el efecto de profundidad, como si se tratase de un dedo pulsando una tecla.

Flat design: Recurrir a elemento sencillos y prácticos, tirando al minimalismo, para eliminar cualquier parecido con el mundo real, y buscando así, resaltar el contenido.

Se podría decir que son dos conceptos opuestos, y resulta interesante que podamos captar conceptos de uno y de otro para mezclarlos.

Ingredientes

-HTML
-CSS
-Editor de texto
-Navegador

Objetivo final

Un botón parecido al siguiente:

Manos a la obra

Vamos a trabajar sobre la etiqueta <a>, la cual se deja hacer casi de todo, aunque a veces sirva sólo de enlace a otro recurso. La idea es sencilla, y consiste en engañar al usuario jugando con las sombras del elemento. Si os fijáis en el ejemplo anterior, el efecto de profundidad se consigue reduciendo el tamaño de la sombra inferior, y no incrustando el botón sobre la página ;).

El código HTML que vamos a utilizar es el siguiente:

[html]
<div id="button-example-wrapper"><a class="button-example" onclick="return false;">
<!–Pongo return false; para evitar que me lleve a ningún sito el botón–>
¡Tarea completada!
</a></div>

[/html]

Nuestro elemento tendrá tres estados, en cada estado he puesto comentarios relevantes que nos ayudarán a conseguir el efecto deseado:

Reposo

[css]
.button-example{

border-radius: 8px;
background:rgb(102, 181, 255);
/*añadimos sombras inferiores*/
-moz-box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);
-webkit-box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);
box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);

display:inline-block;
margin:0px 10px 10px 0px;
padding:10px;
text-decoration:none;/*anulamos subrayado del texto dentro del enlace*/
/*añadimos un efecto de transición para que el efecto sea progresivo*/
transition: all 0.10s ease-in-out;
-webkit-transition: all 0.10s ease-in-out;
/*IMPORTANTE, si no posicionamos de manera relativa el elemento, al hacer click se moverá entero, sin realizar el engaño que buscamos*/
position:relative;

}
[/css]

Cuando pulsamos

[css]
.button-example:active{
/*Gracias a que el elemento está en posición relativa, podemos bajarlo 4 px sin alterar el HTML*/
top:4px;
/*bajamos el tamaño de la sombra para conseguir el efecto de profundidad*/
-moz-box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
-webkit-box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
box-shadow: 0px 1px 0px 0px rgb(0, 105, 202);
}
[/css]

Cuando pasamos por encima(opcional)

[css]
.button-example:hover{
cursor: pointer;
background-color: rgb(172, 213, 252);
}
[/css]

Para centrar el texto de la etiqueta <a>:

[css]
#button-example-wrapper{
text-align:center;
}
[/css]

Si metemos todo lo anterior en una Thermomix, conseguimos el siguiente botón:

Gracias a @JosueBarrosoM por explicarme en su momento cómo se hacía, cualquier momento es buena para aprender truquillos CSS ;).

Referencias:
Post de Applesfera sobre el Skeumorfismo.
Flat design.

Suscríbete a nuestra newsletter