Botón 3D que se hunde
Un botón con volumen y una sombra sólida debajo que baja hasta el fondo cuando lo pulsas.
Ajustes
Código
<button class="uv-3d">Pulsar</button>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Botones
Dónde usarlo
Este botón 3D se siente como una tecla de verdad, así que brilla en interfaces con un punto de juego: el «Comprobar» de una app para aprender idiomas, la pantalla de «Jugar» de un juego en el navegador o el «Siguiente» de una web educativa para niños. Al pasar el ratón sube un poco y al pulsar se aplasta.
La sombra es un tono más oscuro del color principal, así que los tonos medios quedan mejor que los muy oscuros. Le sientan bien las tipografías redondeadas. Para un banco, un despacho de abogados o algo que deba transmitir seriedad, elige un botón plano.