Los botones 3D no son tan populares en un mundo donde las principales tendencias de diseño son Material Design y Flat, pero son un distintivo interesante, además de que sirven de manera excelente para resaltar una acción e indicarle a cualquier usuario que puede dar click ahí. Son un distintivo interesante para que tu diseño web no se vea igual al de todos y claro, para llamar la atención del usuario.

En el artículo de hoy veremos cómo hacer botones en 3D utilizando múltiples sombras, en un siguiente artículo, veremos cómo hacerlo con pseudo elementos :)

Sombras

Esta opción es particularmente buena tanto para cajas en 3D como para texto en 3D, además de que es más sencilla de modificar si tu botón tiene bordes redondeados o transformaciones.

La lógica es colocar múltiples sombras a distintas distancias, cada una de ellas más oscuras que la anterior, colocar múlitples sombras, y que cada una de ellas sea de diferente color es un proceso muy ineficiente, sobre todo si te piden que modifiques el color del botón. Veamos cómo funciona:

See the Pen vGNZMP by Uriel Hernández (urielhdz) on CodePen.

En este vista, podemos notar cómo funcionan las múltiples sombras, en la pestaña de CSS podrás ver que estamos asignando múltiples sombras separadas por coma a la propiedad box-shadow, veamos cómo funciona con otros tamaños:

See the Pen ZWbyNy by Uriel Hernández (urielhdz) on CodePen.

Son los mismos valores pero con cada sombra separada por 1px, tenemos entonces un efecto 3D más realista. Ahora, hay algunas cosas que quiero mencionar que hacen que el efecto sea más preciso:

button{
  /* Así funciona box-shadow */
  box-shadow: X Y blur spread;
}

En el snippet de código de arriba, vemos cómo la propiedad box-shadow se compone de 4 propiedades, la distancia en X, la distancia en Y, el desenfoque y el tamaño de la sombra. Nota como en el efecto utilizamos las 4 propiedades, parte de que el botón se vea realista en 3D es que no tiene blur. Intenta agregarle blur a la sombra para ver cómo cambia el botón

Como puedes ver en el siguiente demo, usar múltiples sobras podemos además transformar o cambiar el borde del elemento y el efecto 3D sigue funcionando:

See the Pen wGKeVa by Uriel Hernández (urielhdz) on CodePen.

El problema

¿Cuáles son las desventajas de usar múltiples sombras? En primer lugar, el efecto de los colores es fácil cuando hablamos de escala de grises, pero cualquier otro color complica las cosas, tendríamos que usar un editor gráfico e ir cambiando la oscuridad del mismo color para poder conservar lo realista del efecto, ahora imagina que a mitad del proyecto te piden que cambies el color... iugh, mucho tiempo desperdiciado.

En segundo lugar, cambiar el color significa hacer hasta 5 cambios, no es lo que quieres hacer con tu hoja de estilos.

SASS al rescate

SASS nos permite realizar este efecto de manera sencilla, SASS tiene funciones para procesar colores y ciclos, ambas utilidades solucionarán nuestros problemas :)

Esta es la forma SASS de hacerlo:

See the Pen XdmaWV by Uriel Hernández (@urielhdz) on CodePen.

Ahora estamos usando otro color, y aunque esta técnica tiene sus desventajas (complejidad, más código) es más fácil de mantener y reutilizar, solo necesitas cambiar el color base y todo cambia automáticamente. Intentemos con otro color:

See the Pen Myavav by Uriel Hernández (@urielhdz) on CodePen.

Una modificación y tenemos botones 3D en el color que queramos... claro, pero ¿qué pasó?

/* Declaración de variables, para cambiar el color, solo modifica la variable $base-color */
$base-color: #ff4081;
$shadow: "";


/* Iteramos con un ciclo del 1 al 4, cada iteración del siglo $i (una variable) va cambiando su valor */
@for $i from 1 through 4{

  /* La posición de la sombra la cambiamos con la variable $i que primero vale 1, luego 2 y así hasta el 4 */
  $shadow: $shadow + "#{$i}px #{$i}px 0px 2px " + darken($base-color,$i*5) + ",";

  /*  La función darken, nos permite oscurecer un color, el primer parámetro es el color y el segundo parámetro un valor del 1-100 de cuánto oscurecerá */

}

/*  Nuestro ciclo nos devuelve una cadena con una coma demás, con la línea de abajo removemos el último caracter para quitar dicha coma */

$shadow : str-slice($shadow,0,str-length($shadow)-1);

button{
  color:white;
  appearance: none;
  border:none;
  background: $base-color;
  /* $shadow es una variable string, necesitamos quitarle las comillas, la función unquote hace eso */
  box-shadow: unquote($shadow);
}