Este generador de botones CSS te permite diseñar un botón con vista previa en vivo y copiar el código listo para usar. Ajusta el color, el radio de los bordes, el relleno, el tamaño de fuente, la sombra y el efecto hover, y el CSS se genera automáticamente. Funciona en tu navegador, sin registro y en español.
Cómo crear un botón CSS
- Cambia el texto y los colores de fondo y de texto.
- Ajusta el radio de borde, el relleno y el tamaño de fuente con los controles.
- Activa la sombra o el efecto hover si los quieres y copia el CSS.
Consejos de accesibilidad
Un buen botón necesita suficiente contraste entre el texto y el fondo para ser legible por todos. Comprueba tu combinación con nuestro comprobador de contraste WCAG. Y para más utilidades, visita nuestras herramientas CSS.
Preguntas frecuentes
¿Cómo aplico el botón en mi web?
Copia el CSS a tu hoja de estilos y añade la clase mi-boton a tu elemento <button> o <a>.
¿Puedo usarlo en WordPress?
Sí. Pega el CSS en Apariencia → Personalizar → CSS adicional y aplica la clase al botón.
¿El efecto hover funciona en móvil?
En móvil no hay hover como tal; el estilo base es el que se ve. Por eso conviene que el botón se entienda bien sin depender del hover.
