Cómo usar: Estilos de Botones CSS
- Pasa el cursor sobre los botones y haz clic en el estilo que te guste.
- Define tus colores, tamaño, radio de esquina y velocidad, además de los estados hover, pulsado y clicado. Cada estilo se actualiza en vivo.
- Copia el CSS y el HTML, o usa Copiar todo para obtener un solo bloque.
- Para Webflow, pulsa Copiar a Webflow y pega en el Designer con Ctrl/⌘+V.
Efectos hover que pesan poco
Todos los estilos de aquí son CSS puro, salvo un estilo de barrido de línea que añade un pequeño SVG en línea. No usa librerías ni JavaScript. Los colores son propiedades personalizadas al inicio de la regla, así que cambiar el aspecto de un botón más adelante significa modificar dos o tres valores.
- Usuarios de teclado tienen un anillo
:focus-visiblevisible en todos los estilos. - La reducción de movimiento se respeta: el desplazamiento se desactiva para quienes piden menos animación.
- Enlaces o botones: usa
<a>para ir a algún sitio y<button>para hacer algo. El CSS funciona con ambos.
Estados hover, pulsado y clicado
Cada botón incluye un color de texto :hover y un color y tamaño :active al pulsar. Activa Estado clicado para añadir un estilo .is-clicked con un pequeño script, ideal para botones de me gusta, guardar o seguir. Elige rem para dimensionar el botón en relación con el tamaño de fuente raíz, asumiendo el valor predeterminado del navegador de 16px. Las líneas finas de 1px y 2px se mantienen en píxeles para que se vean nítidas.
Usar un estilo en Webflow
Copiar a Webflow pega un elemento Embed que contiene los estilos y el botón. Webflow no puede crear animaciones de pseudo-elementos en el panel de estilos, así que un Embed mantiene el efecto exacto. Si prefieres dar estilo a tus propios botones, pon el CSS en el código personalizado de tu sitio y asigna la clase.
¿Quieres crear un botón desde cero? Usa el Generador de Botones CSS. Comprueba la legibilidad del texto con el Verificador de Contraste, y consulta los Iconos de Menú Hamburguesa para botones de menú animados.
También se busca como: efectos hover css botones, botones css animados, animación hover botón css, copiar y pegar botones css, botón hover webflow, botones css bonitos, animación borde botón css.
Herramientas que combinan con: Estilos de Botones CSS
- Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.