CSS button generator: crea código para tus botones
Este css button generator te permite diseñar botones web de forma visual y obtener al instante el código listo para tu proyecto. Puedes personalizar colores, espaciado interno y esquinas redondeadas mientras observas la vista previa en tiempo real. Genera HTML con CSS puro o clases de Tailwind CSS sin necesidad de registrarte ni instalar nada.
Cómo crear un botón en HTML y CSS paso a paso
Diseñar un botón personalizado y exportar su código lleva solo unos segundos:
- Ajusta el Color de fondo y el Color del texto mediante los selectores de color.
- Define el espaciado interno con los deslizadores de Relleno X y Relleno Y, y suaviza los bordes mediante el Radio del borde.
- Selecciona una animación en el menú Efecto al pasar el cursor para añadir interactividad.
- Haz clic en Copiar al portapapeles para obtener la etiqueta HTML y la regla de estilo correspondiente.
Botones redondos CSS y estilo píldora
El control de Radio del borde define la forma de las esquinas del elemento. Un valor de 0 px produce esquinas completamente rectas, mientras que valores entre 4 px y 8 px ofrecen un aspecto moderno y equilibrado.
Para conseguir un botón tipo píldora, aumenta el radio hasta que alcance al menos la mitad de la altura total del botón. Con el espaciado predeterminado, un valor de unos 24 px otorga la forma curva continua en CSS puro.
Obtener código CSS para botones o clases de Tailwind CSS
Dentro de Más opciones, el selector de Formato de salida te permite alternar entre CSS puro y Tailwind CSS. Si eliges CSS puro, obtendrás una regla reutilizable basada en la clase .custom-btn para añadir directamente a tu hoja de estilos en VS Code.
Al cambiar a Tailwind CSS, el generador ajusta automáticamente las medidas a los escalones de la escala oficial y genera valores arbitrarios para los colores, como bg-[#2563eb]. Si el radio alcanza o supera los 40 px, se asigna la clase rounded-full.
CSS button generator animation: efectos al pasar el cursor
El menú Efecto al pasar el cursor añade animaciones dinámicas cuando el usuario sitúa el ratón sobre el botón. Las opciones disponibles incluyen Aumentar (escala un 5 %), Elevar (desplaza el botón hacia arriba con una sombra suave), Resplandor (añade un halo del propio color) y Contorno, o bien Ninguno para mantener un diseño estático.
En Más opciones puedes definir la velocidad de la transición entre rápida (150 ms), normal (300 ms) y lenta (500 ms). En teléfonos móviles y pantallas táctiles, mantén pulsado el botón en la vista previa para probar el efecto.
CSS button generator with icon: crear botón con icono CSS
Al activar la casilla Añadir icono de muestra dentro de Más opciones, el botón añade una flecha vectorial junto al texto. El código generado incluye el elemento SVG incrustado y aplica la alineación mediante Flexbox con display: inline-flex y align-items: center.
Se aplica un espacio constante de 8 px entre el texto y el icono (gap: 8px en CSS o gap-2 en Tailwind CSS). Una vez insertado en tu maquetación, puedes sustituir la etiqueta SVG de muestra por tu propio icono.
Preguntas frecuentes
¿Cómo hacer un botón en HTML y CSS?
Para crear un botón en HTML y CSS, selecciona los colores de fondo y texto, ajusta los controles de relleno y radio del borde, y pulsa en Copiar al portapapeles. Obtendrás una etiqueta estándar y una regla de CSS limpio lista para pegar en tu hoja de estilos, sin código sobrante.
¿Cómo crear un botón redondo o tipo píldora en CSS?
Aumenta el deslizador de Radio del borde en el generador. En CSS puro, un valor de unos 24 px o superior con el relleno por defecto genera la forma de píldora. En modo Tailwind CSS, la herramienta asigna automáticamente la clase rounded-full a partir de los 40 px.
¿Cómo añadir un efecto hover animado a un botón?
Selecciona un efecto en el menú Efecto al pasar el cursor, como Aumentar, Elevar, Resplandor o Contorno. En Más opciones puedes ajustar la velocidad de la animación entre rápida, normal y lenta.
¿Puedo generar clases de Tailwind CSS para mi botón?
Sí, despliega Más opciones y cambia el Formato de salida a Tailwind CSS. La herramienta adaptará los valores de relleno y radio a la escala de Tailwind y generará clases con sintaxis de valores arbitrarios para los colores.
¿Cómo poner un icono SVG dentro de un botón en CSS?
Marca la casilla Añadir icono de muestra en Más opciones. El generador añadirá un SVG vectorial y aplicará propiedades Flexbox para mantener el texto y el icono alineados verticalmente.
¿Cómo hacer un botón desplegable en HTML y CSS?
Un botón desplegable requiere estructurar un contenedor con una lista de enlaces en HTML y gestionar su visibilidad mediante CSS o JavaScript. Este generador está enfocado en botones de acción directos, pero puedes utilizar el código generado como elemento base para el disparador de tu menú desplegable.
¿El generador de botones CSS es gratuito y requiere registro?
La herramienta es totalmente gratuita y no requiere registro ni crear una cuenta. Todo el diseño y la generación del código se ejecutan localmente en tu navegador web.
¿Cómo funcionan los efectos hover en teléfonos móviles o pantallas táctiles?
En pantallas táctiles no existe un cursor físico continuo, por lo que el estado hover no se activa al deslizar el dedo. Para probar el efecto en la vista previa desde un móvil, debes mantener pulsado el botón.
Recomendado
-
Don't Make Me Think, Revisited (Steve Krug)Por qué se hace clic en un botón: el clásico breve del diseño web
-
Calibrador de pantalla Datacolor SpyderVe los colores de tus botones tal como son de verdad
-
Ratón inalámbrico Logitech MX Master 3SClics precisos y silenciosos para afinar padding y bordes
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
