Generador de Botones CSS con Vista Previa en Vivo
El generador de botones CSS te permite diseñar un botón personalizado de forma visual y copiar un CSS limpio y listo para pegar, sin escribir las propiedades una por una a mano. Ajusta el fondo, el texto, el relleno, el borde, la sombra y el efecto hover con controles sencillos y observa cómo la vista previa se actualiza en vivo.
Crea un botón sólido sencillo, un degradado de dos colores, un estilo neón con brillo o una transición hover suave, y luego toma el código como reglas CSS o como un fragmento completo de HTML + CSS. Está pensado para desarrolladores, diseñadores y cualquiera que quiera un botón atractivo sin escribirlo desde cero.
Cómo usar el Generador de Botones CSS
Elige un estilo predefinido de inicio
Haz clic en cualquiera de los 12 estilos predefinidos: Sólido, Contorno, Degradado, Píldora, Pulsado 3D, Neón, Cristal, Minimalista, Sombra elevada, Subrayado, Redondeado o Resaltado. Cada uno configura los estados normal y hover para que personalices desde ahí.
Personaliza el estado Normal
Con la pestaña Normal abierta, define el Fondo (color sólido o un degradado de dos colores con ángulo), el color del Texto, el tamaño de fuente y la negrita, además del Relleno, el Borde y la Sombra.
Diseña el estado Hover
Cambia a la pestaña Hover y ajusta los mismos controles para lo que cambia al pasar el cursor. Define la duración y la aceleración de la Transición una vez en la pestaña Normal y luego pasa el cursor sobre el botón de vista previa para ver el efecto.
Previsualiza y prueba
La vista previa en vivo se actualiza en tiempo real. Usa el selector de Fondo para probar el botón sobre un fondo claro, oscuro o personalizado, y escribe tu propio Texto del botón para ver la etiqueta real.
Copia el código
Haz clic en Copiar CSS para obtener solo las reglas .button y .button:hover, o en Copiar HTML + CSS para un fragmento completo con el elemento del botón y un bloque <style> incluido.
Funciones
Vista previa en vivo con hover real
Mueve el cursor sobre el botón de vista previa para activar el estado hover y la transición CSS que configuraste, sin tener que pegarlo en otro lugar para probarlo.
Controles de Normal y Hover
Diseña cada estado por separado con pestañas independientes de Normal y Hover, así controlas exactamente qué cambia cuando el usuario pasa el cursor.
Fondos sólidos y degradados
Usa un solo color sólido o un degradado lineal de dos colores con un color de inicio y fin y un ángulo ajustable de 0 a 360 grados.
Estilo de texto
Define el color del texto, el tamaño de fuente de 10 a 32 px y activa o desactiva la negrita para la etiqueta del botón.
Controles de relleno y borde
Ajusta el relleno vertical y horizontal, además del ancho, el color y el radio de las esquinas del borde, hasta una forma de píldora completa.
Sombra con opacidad
Controla el desplazamiento X/Y de la sombra, el desenfoque, el color y la opacidad para dar profundidad, relieve o un brillo suave a tu botón.
Duración y aceleración de la transición
Define la duración de la transición hover y elige una curva de aceleración: ease, ease-in, ease-out, ease-in-out o linear.
12 estilos predefinidos
Empieza rápido con los estilos Sólido, Contorno, Degradado, Píldora, Pulsado 3D, Neón, Cristal, Minimalista, Sombra elevada, Subrayado, Redondeado y Resaltado.
Selector de fondo de la vista previa
Comprueba cómo se ve el botón sobre un fondo claro, oscuro o de cualquier color personalizado antes de publicarlo.
Texto del botón editable
Escribe tu propia etiqueta para que la vista previa refleje el texto real que vas a usar, en lugar de un texto de ejemplo.
Dos opciones de copia
Copia solo las reglas CSS o toma un fragmento completo de HTML + CSS con el elemento del botón listo para pegar en cualquier página.
Código limpio e independiente de frameworks
La salida usa propiedades CSS estándar, así que la misma clase .button funciona en HTML puro, React, Vue, WordPress y más.
Preguntas frecuentes
¿Cómo creo un botón en CSS?
Elige un estilo predefinido o empieza desde cero y luego ajusta los controles de fondo, texto, relleno, borde y sombra. La vista previa en vivo muestra el resultado y, al hacer clic en Copiar CSS, obtienes la regla .button terminada para pegar en tu hoja de estilos.
¿Cómo añado un efecto hover a un botón CSS?
Cambia a la pestaña Hover y modifica cualquier control —color, sombra, borde, etc.— para definir cómo se ve el botón al pasar el cursor. Define la duración y la aceleración de la transición en la pestaña Normal y luego pasa el cursor sobre el botón de vista previa para probarlo. El estado hover se exporta como una regla .button:hover.
¿Cómo hago un botón con degradado?
En la sección Fondo, haz clic en el botón Degradado. Elige los colores Desde y Hasta y define el ángulo de 0 a 360 grados. La vista previa y el código linear-gradient generado se actualizan al instante.
¿Cómo redondeo las esquinas de un botón CSS?
Usa el control Radio en la sección Borde. Súbelo para esquinas más suaves o llévalo hasta 50 px para una forma de píldora totalmente redondeada. Los estilos Píldora y Redondeado te dan estilos redondeados listos para usar como punto de partida.
¿Puedo copiar el código del botón generado?
Sí. Copiar CSS copia las reglas .button y .button:hover, mientras que Copiar HTML + CSS copia un fragmento completo con el elemento del botón envuelto en un bloque <style>, listo para pegar en cualquier página HTML.
¿Puedo personalizar los estados normal y hover por separado?
Por supuesto. Las pestañas Normal y Hover tienen cada una sus propios controles de fondo, texto, relleno, borde y sombra, así puedes definir exactamente qué cambia al pasar el cursor. Los ajustes de transición son compartidos y se configuran una sola vez en la pestaña Normal.
¿Puedo usar el código del botón en cualquier proyecto?
Sí. El CSS generado es código simple e independiente de frameworks que usa propiedades estándar como background, border-radius, box-shadow y transition. Aplica la clase .button a tu elemento en HTML, React, Vue, Angular, WordPress o cualquier proyecto web.
Aún no hay comentarios. ¡Sé el primero en comentar!