26

10

Crea botones 3D

En un artículo os mostré como hacer efectos 3D a textos y ahora os voy a enseñar como aplicar el mismo efecto en etiquetas para hacer botones en 3D.
Estos efectos los haremos con box-shadow, que os expliqué como funcionaban también y se basan en poner varias sombras que aparezcan una detrás de otra y den el efecto de profundidad, como podéis ver en el ejemplo.

Dar el volumen

Estos ejemplos pueden parecer complejos, pero no son nada del otro mundo, por poner un ejemplo, el segundo (el azul) simplemente tiene un fondo y letras de color azul, los bordes redondeados y el efecto 3D hecho con box-shadow (que es en lo que me voy a centrar), os muestro el código del box-shadow abajo.
También es comento que los colores lo he establecido en notación HSL, que es más fácil de cambiar el brillo para crear volumen al borde, como expliqué en el artículo que dediqué a HLSA.

1. box-shadow: 0px 1px 0px hsl(180,100%,40%),

0px 2px 0px hsl(180,100%,38%),

0px 3px 0px hsl(180,100%,37%),

0px 4px 0px hsl(180,100%,36%),

0px 5px 0px hsl(180,100%,35%),

0px 6px 0px hsl(180,100%,34%),

0px 7px 0px hsl(180,100%,33%),

0px 8px 0px hsl(180,100%,32%),

0px 9px 0px hsl(180,100%,31%),

0px 10px 0px hsl(180,100%,20%),

0px 11px 10px #000;

Lo único que varía en el color (HSL) es el brillo (el tercer número) para que sea más oscuro contra más profundidad tenga, para crear el efecto de volumen.

Hacer el efecto de pulsado

Para hacer el efecto de que se hunde el botón lo que he hecho ha sido quitar la mitad de las sombras, y así es más corta la profundidad.

1. box-shadow: 0px 1px 0px hsl(180,100%,40%),

0px 2px 0px hsl(180,100%,37%),

0px 3px 0px hsl(180,100%,35%),

0px 4px 0px hsl(180,100%,33%),

0px 5px 0px hsl(180,100%,31%),

0px 6px 0px hsl(180,100%,20%),

0px 7px 10px #000;

Recuera que lo que se puede hacer con CSS3 es infinito, solo tienes que echarle imaginación, en estos ejemplo podríamos haber usado la propiedad transition y haber hecho que cambiase el color de fondo o de la sombra de forma suave, o mejor dicho, el de cualquier cosa, así que si lo pruebas y haces algo interesante no dudes en compartirlo.