Generador de botones CSS
Diseña un botón de forma visual, comprueba sus estados hover y active en la vista previa en vivo y copia un HTML y CSS limpios. Nada sale de tu navegador.
Última actualización:
Cómo usar Generador de botones CSS
- Empieza con un ajuste predefinido como Clásico, Contorno o Pulsador 3D.
- Edita el texto y la fuente en la pestaña Texto y luego elige colores o un degradado en la pestaña Colores.
- Dale forma con el padding, el radio y el borde en Tamaño y borde, y añade profundidad en la pestaña Sombra.
- Ajusta la interacción en Hover y active, y usa los botones de vista previa Hover y Active para revisar cada estado.
- Pulsa Copiar CSS (o Copiar HTML + CSS) y pega el código en tu proyecto.
Anatomía de un buen botón CSS
Un estilo de botón moderno tiene cuatro partes: la regla base, una regla :hover, una regla :active y una regla :focus-visible. Esto es lo que hace cada propiedad del código generado:
| Propiedad | Por qué está ahí |
|---|---|
display: inline-flex + align-items: center | Centra el texto verticalmente y te permite añadir un icono con gap. |
padding | Fija el tamaño; los botones deben crecer con su texto en lugar de usar anchos fijos. |
line-height: 1.2 | Mantiene una altura predecible con cualquier fuente. |
border: none | Elimina el borde predeterminado del botón del navegador. |
cursor: pointer | Muestra el cursor de mano que los usuarios esperan en elementos clicables. |
transition | Anima con suavidad los cambios de hover y pulsación, normalmente en 150–250ms. |
transform: translateY() | Eleva o hunde el botón sin provocar desplazamientos del diseño (barato de animar). |
Contorno :focus-visible | Muestra a los usuarios de teclado qué botón tiene el foco, sin mostrar un anillo al hacer clic con el ratón. |
Tamaños recomendados
| Tamaño | Tamaño de fuente | Padding | Altura aprox. |
|---|---|---|---|
| Pequeño | 14px | 8px 14px | 33px |
| Mediano | 16px | 12px 24px | 43px |
| Grande | 18px | 16px 32px | 54px |
La altura es el tamaño de fuente × line-height (1.2) + padding superior e inferior + bordes. En pantallas táctiles, mantén los botones principales con al menos 44px de alto, como recomiendan las Human Interface Guidelines de Apple; WCAG 2.2 (criterio de éxito 2.5.8) fija 24 × 24 px CSS como tamaño mínimo del objetivo.
Consejos para estilos de botón que convierten
- Un botón principal por vista. Haz la acción principal sólida y de alto contraste; las acciones secundarias usan los ajustes Contorno o Enlace de texto.
- Usa verbos en las etiquetas. "Empieza la prueba gratis" funciona mejor que "Enviar".
- Que el hover sea sutil. Un tono más oscuro, una elevación de 1–3px y una sombra algo mayor se sienten receptivos sin distraer.
- Respeta la reducción de movimiento. Envuelve las transformaciones en
@media (prefers-reduced-motion: no-preference)si tus botones se mueven mucho. - Estado desactivado. Añade
.btn:disabled { opacity: .5; cursor: not-allowed; }cuando un botón pueda desactivarse.
Combina el botón con una sombra personalizada del generador de box-shadow, y mantén tu hoja de estilos ordenada con el formateador de CSS o ligera con el minificador de CSS.
Preguntas frecuentes
¿Debo usar un elemento button o un enlace?
Usa <button> para acciones en la página (enviar un formulario, abrir un menú, guardar) y <a href> para navegar a otra página o URL. El CSS generado funciona en ambos, así que puedes dar a un enlace aspecto de botón con la misma clase.
¿Por qué no puedo animar un fondo degradado en hover?
Los navegadores no pueden interpolar entre dos degradados de background-image, así que el cambio de degradado ocurre al instante aunque haya una transición. El CSS generado sigue animando con suavidad transform, la sombra, el color y el borde. Para un cambio de degradado suave, haz aparecer un pseudoelemento con el degradado de hover usando opacity.
¿Qué diferencia hay entre :hover, :active y :focus-visible?
:hover se aplica mientras el puntero está sobre el botón, :active mientras se está pulsando, y :focus-visible cuando el botón recibe el foco con el teclado (Tab). Mantén siempre un estilo de foco visible para que los usuarios de teclado sepan dónde están; el generador añade un contorno por ti.
¿Qué tamaño debe tener un botón?
Apunta a un área táctil de al menos 44 por 44 píxeles CSS (la recomendación de Apple; WCAG 2.2 fija un mínimo de 24 por 24 px). Con una fuente de 16px, un padding vertical de 12px da una altura de unos 43px.
¿Cuánto contraste de color necesita el texto de un botón?
WCAG AA exige una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (24px, o 18.66px en negrita). La herramienta calcula la relación entre el color del texto y el fondo del botón y avisa cuando es demasiado baja.
¿Por qué el CSS usa transition en propiedades concretas en lugar de all?
Enumerar las propiedades que realmente cambian (background-color, color, border-color, box-shadow, transform) evita animar por accidente propiedades de diseño y hace que el efecto sea predecible y barato de renderizar.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.