Botones
Botones en CSS puro, ordenados por estilo: pasa el cursor y copia el código
1–24 de 134
Acerca de la herramienta
Esta galería reúne 134 botones escritos en HTML y CSS puro, sin JavaScript ni librerías. Están ordenados en doce categorías: sólidos, contorno, degradados, neón, relleno, relieve, sombras, animados, con icono, enlaces, vidrio y divertidos. Cada vista previa reacciona al pasar el cursor, así que puedes valorar el efecto antes de copiar el código en tu proyecto.
Los colores se ajustan en la parte superior de la galería: el color principal y el del texto, con un fondo de vista previa oscuro o claro. En el código, pasan por dos variables CSS, --accent y --on-accent, que puedes cambiar después en tu hoja de estilos. La mayoría de los modelos usan una etiqueta button; los de la categoría Enlaces, una etiqueta a.
Cómo usarla
- Elige una categoría, o Todos para ver el conjunto de botones.
- Ajusta el Color y el Texto, y el Fondo Oscuro o Claro de la vista previa.
- Pasa el cursor por las vistas previas y abre el código del botón elegido con el icono de abajo a la derecha.
- Pulsa Copiar el HTML y Copiar el CSS, y pégalos en tu página y en tu hoja de estilos.
Preguntas frecuentes
¿Hace falta JavaScript o un framework?
No. Cada botón es un fragmento HTML más un bloque CSS independiente, con los efectos al pasar el cursor y las animaciones incluidos. Funcionan en cualquier proyecto, con o sin framework, siempre que mantengas la clase button.
¿Cómo cambio los colores después de copiar?
El CSS copiado empieza con una regla que define --accent y --on-accent con los colores elegidos en la herramienta. Cambia esas dos variables, en esa regla o más arriba en tu hoja de estilos, para adaptarlo a tu marca.
¿Puedo usar estos botones en un proyecto comercial?
Los botones son creaciones originales de MagicWebBox, publicadas junto con el resto del proyecto bajo licencia MIT. Puedes reutilizarlos, también en proyectos comerciales, siempre que respetes las condiciones de esa licencia.
¿Pueden convivir varios de estos botones en una página?
Todos los modelos usan la misma clase button. Si combinas varios, cambia el nombre de la clase en el HTML y el CSS de cada uno para que sus estilos no se pisen entre sí.