Plantilla CSS: Botón con sombra para efecto de profundidad (box-shadow)
📝 Uso previsto
Esta plantilla es útil cuando deseas añadir profundidad visual a un botón para captar la atención del usuario. Ideal para resaltar elementos interactivos.
📘 Explicación
Se utiliza la propiedad box-shadow para generar una sombra que da un efecto tridimensional al botón. El estado :hover intensifica la sombra para mejorar la interacción.
🔹 Código parcial
<button class="shadow-button">Haz clic</button>
<style>
.shadow-button {
background-color: #f04e30;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.shadow-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
</style>
🔸 Código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Botón con sombra</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.shadow-button {
background-color: #f04e30;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.shadow-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<button class="shadow-button">Haz clic</button>
</body>
</html>
🎨 Técnicas avanzadas de diseño para botones con sombra
El diseño de botones usando box-shadow es una herramienta poderosa para crear jerarquía visual en la interfaz de usuario. Cuando se usa adecuadamente, guía naturalmente la atención del usuario hacia los elementos interactivos importantes.
🌈 Uso de variaciones de color
Más allá del color rojo básico (#f04e30), los colores pueden ajustarse para que coincidan con el esquema de colores del sitio. Por ejemplo, los botones azules pueden usar background-color: #4285f4, los verdes #34a853, etc. El color de la sombra también puede ajustarse de rgba(0, 0, 0, 0.3) a rgba(66, 133, 244, 0.3) u otros tonos para combinar con el color base.
🖌️ Ajuste fino de sombras para cambiar la impresión
Pequeños ajustes en la configuración de la sombra pueden cambiar drásticamente la apariencia del botón. Usar box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) da una impresión más delicada, mientras que 0 8px 15px rgba(0, 0, 0, 0.3) crea un efecto 3D más fuerte y elevado. Además, usar la palabra clave inset añade una sombra interna que genera un efecto de botón presionado.
⚡ Mejorando la interacción
Para hacer el efecto hover más dramático, añade transform: scale(1.05). Añadir transition: transform 0.2s ease hace que la animación de escalado sea suave. Para estados activos (click), usa la pseudo-clase :active para cambiar la sombra a box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), dando al usuario una retroalimentación visual de que el botón fue presionado.
Combinando estas técnicas puedes crear botones con funcionalidad más allá de una simple decoración. Sin embargo, animaciones o efectos excesivos pueden afectar negativamente la usabilidad, así que siempre diseña pensando en la experiencia del usuario.