Normal
Hover
Button Preview
Los botones son el elemento más clicado en cualquier página web. Un botón bien estilizado comunica jerarquía, indica interactividad y refuerza la marca. Este generador te permite crear botones CSS personalizados con control completo sobre colores, tipografía, borde, sombra y estados hover.
.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 8px;
background: #7c6fff;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.button:hover {
background: #6a5de8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(124, 111, 255, 0.4);
}
Usa <button> para acciones (enviar formulario, abrir modal). Usa <a> para navegación. Nunca uses <div> para botones interactivos — rompe la accesibilidad y el soporte de teclado.
Asegúrate de que el contraste de color sea al menos 4.5:1. Añade un estilo :focus-visible claro. Nunca elimines el outline sin reemplazarlo. Usa texto descriptivo, no solo iconos.