CSS Button Generador
Diseñe un botón con controles en vivo y copie CSS listo para usar, incluidos los estados activo y de desplazamiento.
Diseñe un botón visualmente y copie el CSS que produce. Usted establece la etiqueta, los colores de fondo y de texto, el relleno horizontal y vertical y el radio de las esquinas; la vista previa se actualiza instantáneamente y el cuadro de código se llena con un conjunto de reglas completo y listo para copiar. Es una manera rápida de lograr el aspecto de una llamada a la acción sin escribir el CSS a mano ni adivinar los valores de los píxeles. Todo se ejecuta en su navegador.
Lo que puedes controlar
Dos selectores de color establecen los colores de fondo y de texto. Tres controles deslizantes manejan el espaciado y la forma:relleno horizontal(12–80 px),relleno vertical(8–50 px) yradio de esquina(0–60 px), cada uno de los cuales muestra su valor actual en píxeles a medida que arrastra. La vista previa en vivo refleja cada cambio inmediatamente, incluido un efecto de desplazamiento, para que puedas juzgar la sensación real del botón en lugar de leer números.
El CSS que obtienes
La regla generada apunta a una clasede botón personalizadoe incluye más que solo su configuración: agrega cursor: puntero, una fuente Inter semi-negrita, una transición suavey centrado flexible para que un icono y una etiqueta se alineen. También escribe un estado:hoverque levanta ligeramente el botón, lo ilumina y agrega una sombra suave, además de un estado:activeque lo presiona hacia abajo. Pega todo el bloque en tu hoja de estilo y cambia el nombre de la clase para que se adapte a tu proyecto.
Preguntas Frecuentes
¿El CSS generado incluye efectos de desplazamiento?
Sí. Junto a la regla base .custom-button, escribe un estado :hover (un ligero levantamiento, un aumento de brillo y una sombra suave) y un estado :active que presiona el botón nuevamente.
¿Qué unidades utiliza para el relleno y el radio?
Píxeles. El relleno horizontal varía de 12 a 80 px, el relleno vertical de 8 a 50 px y el radio de las esquinas de 0 a 60 px, cada uno de los cuales se muestra en vivo a medida que mueve el control deslizante.
¿Puedo cambiar el nombre de la clase?
Sí. La regla está escrita para una clase llamada .custom-button, pero es solo texto; cámbiele el nombre en el código copiado para que coincida con su propia convención de nomenclatura.
¿Establece una fuente específica?
The CSS specifies the Inter font family at semi-bold weight. If Inter is not loaded on your site the browser falls back to its default sans-serif, so change that line if you use a different font.