Generador de botón CSS
Empieza con un estilo listo y ajusta color, tamaño, esquinas y sombra. Pasa el mouse y haz clic en la vista previa para ver los efectos, luego copia el código.
Cómo usarBotones bonitos en CSS
Disponible en: 
Generador de botón CSS: para qué sirve
Elige un estilo listo (sólido, píldora, contorno, degradado o cuadrado) y ajusta texto, colores, tamaño de fuente, espaciado, esquinas, sombra, grosor de la fuente y el efecto al pasar el mouse (subir, oscurecer o agrandar). La vista previa funciona de verdad: pasa el mouse y haz clic.
El CSS incluye foco visible para el teclado, efecto de hover solo en dispositivos con mouse y una leve reducción al hacer clic. La herramienta muestra el contraste entre el texto y el fondo y avisa cuando queda por debajo de 4,5:1.
Cómo usar
- Elige un estilo listo.
- Ajusta colores, tamaño, esquinas, sombra y efecto.
- Revisa el contraste y copia el CSS y el HTML.
Cuándo usar
- Botones de llamada a la acción en landing pages.
- Estandarizar los botones de un sitio.
- Aprender CSS viendo el resultado.
Preguntas frecuentes
¿El botón es accesible?
El código usa la etiqueta button (o a), mantiene el contorno de foco visible con :focus-visible y la herramienta avisa cuando el contraste entre el texto y el fondo queda por debajo de 4,5:1, el mínimo de WCAG para texto normal.
¿Por qué el efecto de hover solo aparece en la computadora?
El hover está dentro de @media (hover: hover), porque en el celular el toque dispara un hover falso que se queda pegado en el botón. El efecto de clic (:active) funciona en todos los dispositivos.
¿Puedo usar el código en un enlace?
Sí. Cambia <button> por <a href="..."> y mantén la clase; el CSS ya incluye display:inline-flex y text-decoration:none para ambos casos.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.