Cómo usar: Generador de Botones CSS
- Empieza con un preset: sólido, contorno, fantasma, píldora, degradado, 3D, cristal o neo-brutalista.
- Cambia los colores (o un degradado), el tamaño de fuente, el relleno, el radio de las esquinas, el borde y la sombra.
- Elige un efecto hover y prueba cada estado en la vista previa: pasar el ratón, pulsar y Tab para ver el anillo de foco.
- Copia el CSS y el HTML; renombra la clase
.btnsi quieres.
Todos los estados, accesibles por defecto
- Hover ofrece una respuesta visual clara con una
transitioncorta. - Active (pulsado) mueve el botón ligeramente hacia abajo, para que los clics se sientan físicos.
- Focus-visible muestra un contorno marcado solo para usuarios de teclado, así el botón se ve limpio para quien usa el ratón, pero nunca es invisible para quien navega con Tab.
prefers-reduced-motiondesactiva el movimiento para los visitantes que piden menos animación.
Comprueba el texto frente al color del botón con el Contrast Checker: WCAG pide al menos 4.5:1 para texto normal. Usa un <button> real para acciones y un <a> para navegación; el CSS funciona con ambos. Relacionados: Box Shadow Generator, CSS Gradient Generator, CSS Hover Animation Generator.
También se busca como: generador de botones, estilos de botones css, efecto hover botón css, botón con degradado css, crear botones css, código de botón css, estilo de botón webflow.
Herramientas que combinan con: Generador de Botones CSS
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de Glassmorphism — Diseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los navegadores: con el prefijo -webkit-backdrop-filter y un fallback para navegadores antiguos.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
Preguntas frecuentes
¿Cómo hago un efecto hover en un botón con CSS?
Añade una regla :hover que cambie el fondo, la sombra o la posición, y una transition en el botón para que el cambio se anime. Elige un efecto hover aquí para obtener el código.
¿Debo quitar el contorno de foco de los botones?
No, los usuarios de teclado lo necesitan. Usa :focus-visible, como hace este generador, para que el anillo aparezca al navegar con teclado pero no después de hacer clic con el ratón.
¿Cómo hago un botón con degradado?
Marca Fondo degradado y elige dos colores; el CSS usa linear-gradient como background-image.
¿Funciona en Webflow?
Sí. Pega el CSS en un Embed con una etiqueta style (o en el código personalizado de tu sitio) y asigna a tu botón de Webflow la clase btn, o copia los valores en el panel de Estilos.
¿Puedo instalar Generador de Botones CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de Botones CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.