Generador de Botones CSS
Un generador de botones CSS convierte ajustes visuales en una regla lista para pegar. Un botón solo necesita background-color, color, padding y border-radius; el borde es opcional y el padding se escribe primero vertical y luego horizontal. Ejemplo: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff da un botón azul redondeado cuya etiqueta pasa el nivel AA de las WCAG con 5,17:1.
Vista Previa
Comprobación de accesibilidad
Personalizar
Plantillas Rápidas
Código Generado
Herramientas populares
Acerca de Generador de Botones CSS
El Generador de Botones CSS convierte un puñado de deslizadores y selectores de color en la única regla CSS que un botón necesita de verdad. Usted fija la etiqueta, los colores de fondo y de texto, el tamaño y el grosor de la letra, el relleno horizontal y vertical, el radio de las esquinas, el grosor y el color del borde, y una de cuatro profundidades de sombra; un segundo color opcional convierte el relleno plano en un degradado lineal de 135 grados. La vista previa está encima de los controles y es un botón HTML real con sus valores, al tamaño con el que se dibujará en su página, así que lo que aprueba es lo que publica.
Dos cosas hacen que la salida sea utilizable y no decorativa. Primero, el panel de código tiene dos pestañas: una clase .btn reutilizable con reglas :hover, :active, :focus-visible y :disabled para dejar caer en una hoja de estilos, y el mismo elemento button con todo en línea en un atributo style para constructores de páginas, bloques de CMS y plantillas de correo que eliminan el CSS externo. Segundo, el panel de accesibilidad mide el par de colores según las WCAG 2.2 e informa de la relación de contraste con un veredicto AAA, AA o de fallo, cambiando a los umbrales de texto grande cuando el tamaño y el grosor lo permiten.
También informa de la altura renderizada - dos veces el relleno vertical, más dos veces el borde, más 1,2 veces el tamaño de letra, el interlineado que la regla fija para que el botón en pantalla mida exactamente lo que dice la lectura - frente a los objetivos de 24 x 24 y 44 x 44 píxeles CSS de los criterios 2.5.8 y 2.5.5.
Un degradado se comprueba contra sus dos paradas y se muestra la peor de las dos relaciones. Las ocho plantillas - Primario, Peligro, Éxito, Contorno, Píldora, Degradado, Discreto y Neón - son puntos de partida, no un destino: pulse una y siga ajustando. Ningún color, etiqueta o posición de deslizador se envía a ninguna parte; el cálculo del contraste, la vista previa y el código se resuelven en la propia página, y por eso la relación se actualiza en la misma pulsación que redibuja el botón. Lo que copia es una sola clase sin framework que instalar, sin paso de compilación y sin script en ejecución.
Casos de uso
Cómo usar
Escribe el texto que quieres en el botón en Texto del botón y define los colores de Fondo y de texto con las muestras o escribiendo códigos hexadecimales en los campos contiguos.
Arrastra los deslizadores de tamaño de fuente, relleno horizontal, relleno vertical y Radio del borde para dar forma al botón, y sube el Grosor del borde con un Color de borde si lo quieres con contorno.
Elige un Peso de fuente entre Normal, Medio, Seminegrita o Negrita, y una Sombra entre Ninguno, Pequeña, Mediana o Grande.
Marca Degradado y elige el segundo color para convertir el fondo en un degradado diagonal de dos colores.
Pulsa una tarjeta de Plantillas Rápidas como Primario, Contorno, Píldora, Degradado, Discreto o Neón para cargar un estilo acabado que puedes seguir ajustando.
Comprueba el botón en vivo en el panel de Vista previa, cambia la pestaña de salida a CSS o HTML + CSS y pulsa el icono de copiar del cuadro de código.
Consejos Pro
- Ajuste el tamaño de letra antes que nada. El relleno y el radio son mucho más fáciles de juzgar con la etiqueta ya a su tamaño final, y la lectura de altura (2 x relleno vertical + 2 x grosor del borde + 1,2 x tamaño de letra) se mueve con él.
- Cargue una plantilla y luego retoque. Contorno y Discreto ya parten de un grosor de borde mayor que cero, que es el camino más rápido a un botón secundario.
- Escriba los códigos hexadecimales en el campo junto a cada muestra en lugar de buscar dentro del selector de color; la vista previa y la relación de contraste se actualizan con cada tecla.
- El contraste AA se exige en todos los tamaños de texto; lo único que cambia es el umbral: 4,5:1 para texto normal y 3:1 cuando la etiqueta llega a 24px, o a 18,66px en negrita. Un par a 3:1 puede parecer correcto en un monitor brillante y ser ilegible al aire libre, así que trate el listón bajo como techo, no como objetivo.
- Los degradados se comprueban contra sus dos paradas y se informa de la peor relación, así que si solo falla un extremo, mueva esa parada en vez de recolorear todo el botón.
Solución de problemas
El CSS copiado no tiene ningún efecto visible en mi página.
La clase se está anulando, o nunca se aplicó. Confirme que el elemento lleva class="btn", cargue su hoja de estilos después del CSS del framework y abra el panel Estilos en las herramientas de desarrollo: una declaración tachada significa que otro selector gana por especificidad o por orden.
El degradado se ve plano o no aparece en absoluto.
Un degradado es una imagen de fondo, no un color de fondo. Marque Degradado para que la herramienta emita background: linear-gradient(...) en lugar de background-color. Si aun así no aparece, busque una propiedad abreviada background o un background-image declarados después sobre el mismo elemento: la abreviada devuelve background-image a none y borra el degradado. Un background-color posterior no puede taparlo, porque CSS Backgrounds 3 pinta el color debajo de las imágenes de fondo.
El distintivo de contraste dice que los colores fallan, pero el botón me parece legible.
El contraste se mide sobre la luminancia relativa, no sobre lo vivo que parece un color. Pares de tono medio como #f59e0b con texto blanco quedan cerca de 2:1 pese a verse brillantes. Oscurezca el fondo o pase la etiqueta a casi negro; la relación se actualiza mientras escribe.
Preguntas frecuentes
Escriba una sola regla para la clase y ponga seis declaraciones: background-color, color, font-size, font-weight, padding y border-radius. Añada box-shadow y un borde solo si el diseño lo pide. El generador escribe exactamente esa regla por usted: mueva los controles, mire la vista previa en vivo y copie el bloque .btn de la pestaña CSS a su hoja de estilos.
La pestaña CSS da una clase .btn reutilizable con sus reglas de estado para pegar en una hoja de estilos, de modo que todos los botones del sitio cambian al editar ese bloque. La pestaña HTML + CSS da un único elemento button con las mismas declaraciones en línea en un atributo style, que es lo que necesitan los constructores de páginas, los bloques de CMS y las plantillas de correo, porque eliminan las hojas de estilo externas. Conviértalo en un enlace con href cuando el clic navega.
Suba el control de Radio de borde. Alrededor de 8px obtiene el rectángulo suavizado que usa la mayoría de interfaces, y por encima de la mitad de la altura del botón las esquinas se funden en una píldora. Con la letra de 16px y el relleno vertical de 12px por defecto el botón mide 43px, así que cualquier radio pasado 22 ya parece completamente redondeado, y 999px escrito a mano significa lo mismo.
Sí. Cada vez que cambia el color del texto o del fondo recalcula la relación de contraste WCAG y muestra AAA, AA o un fallo. El texto normal necesita 4,5:1 para AA y 7:1 para AAA; el texto de 24px, o de 18,66px en negrita, cuenta como grande y solo necesita 3:1 y 4,5:1. Los degradados se miden contra sus dos paradas de color.
El panel de tamaño informa de la altura renderizada como dos veces el relleno vertical, más dos veces el grosor del borde, más 1,2 veces el tamaño de letra: el interlineado que el generador fija en la regla, de modo que el número coincide con el botón dibujado encima. El criterio 2.5.8 de las WCAG 2.2 pide un objetivo de 24 x 24 píxeles CSS y el 2.5.5 lo eleva a 44 x 44. La letra de 16px con 12px de relleno vertical da 43px, muy por encima del mínimo.
Use button cuando el clic actúa sobre la página actual: enviar un formulario, abrir un diálogo, ejecutar JavaScript. Es enfocable por defecto, se dispara con Intro y Espacio y admite el atributo disabled. Use un enlace con href cuando el clic lleva a otra URL, para que el clic central y «abrir en una pestaña nueva» sigan funcionando. Ambos pueden llevar la misma clase .btn.
El CSS generado ya lleva .btn:hover y .btn:active. Deje marcada la casilla «Incluir los estados focus y disabled en el código» y obtendrá además .btn:focus-visible con un contorno de 3px desplazado 2px, y .btn:disabled a media opacidad con cursor: not-allowed. Nunca borre un contorno de foco sin sustituirlo por algo visible, o quien navega con teclado pierde todo rastro de dónde está.
Sí. La salida es CSS simple, sin licencia, sin obligación de atribución y sin dependencias en ejecución, y el comentario de crédito de la primera línea se puede borrar. Nada de lo que escribe se sube: la vista previa, el código generado y el cálculo de contraste se hacen con JavaScript dentro de esta página, así que sus colores y etiquetas nunca llegan a un servidor.
Los estilos heredados son casi siempre la causa. Un reset de framework, una font-family del elemento padre, una regla global de button o un selector de mayor especificidad pueden anular la clase pegada. Cargue su hoja de estilos después del CSS del framework, mantenga .btn en un solo elemento y lea el panel Estilos de las herramientas de desarrollo: una declaración tachada le dice exactamente qué selector ganó.