Los botones son una parte esencial de cualquier página web. Sirven para guiar al usuario hacia una acción: enviar un formulario, comprar un producto, ver más información, descargar un archivo o contactar con una empresa.
Aunque crear un botón básico es sencillo, diseñar botones modernos, claros y atractivos requiere cuidar detalles como el color, el tamaño, el espaciado, el borde, el efecto hover y la adaptación a móviles.
En esta guía encontrarás varios snippets de botones modernos con HTML y CSS que puedes copiar, modificar y usar en tus propios proyectos web.
Qué es un snippet de botón
Un snippet es un pequeño bloque de código reutilizable. En este caso, hablamos de fragmentos de HTML y CSS que sirven para crear botones con diferentes estilos.
La idea es simple: copias el código, lo pegas en tu proyecto y lo adaptas a tu diseño.
Puedes cambiar el texto, el enlace, los colores, el tamaño o el efecto hover según lo que necesites.
Cuándo usar estos botones HTML y CSS
Estos botones pueden servirte para muchas partes de una web:
Botones de contacto
Botones de descarga
Botones de compra
Botones para landing pages
Botones de llamada a la acción
Botones en tarjetas de servicios
Botones para secciones hero
Botones de formulariosLo importante es que cada botón tenga una función clara. Un botón bonito no sirve de mucho si el usuario no entiende qué pasará al hacer clic.
1. Botón moderno con degradado
Este botón funciona muy bien como llamada a la acción principal. Puedes usarlo en una sección hero, una landing page o una página de servicios.
<a href="#" class="btn-gradient">Empezar ahora</a>
<style>
.btn-gradient {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 14px;
background: linear-gradient(135deg, #2478ff, #155df5);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 14px 28px rgba(36, 120, 255, 0.25);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-gradient:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(36, 120, 255, 0.32);
}
</style>Este tipo de botón destaca mucho porque usa color fuerte, sombra suave y un pequeño movimiento al pasar el mouse.
2. Botón con borde azul
El botón con borde es ideal como botón secundario. Puedes usarlo junto a un botón principal para ofrecer una segunda opción.
<a href="#" class="btn-outline">Ver más</a>
<style>
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border: 2px solid #2478ff;
border-radius: 14px;
background: #ffffff;
color: #2478ff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-outline:hover {
background: #2478ff;
color: #ffffff;
transform: translateY(-3px);
}
</style>Este botón es limpio, profesional y fácil de combinar con diseños claros.
3. Botón con icono de flecha
Este snippet es útil para botones como “Ver proyecto”, “Leer más”, “Continuar” o “Contactar”.
<a href="#" class="btn-arrow">
Ver proyecto
<span>→</span>
</a>
<style>
.btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 28px;
border-radius: 14px;
background: #0f172a;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
transition: transform 0.25s ease, background 0.25s ease;
}
.btn-arrow span {
transition: transform 0.25s ease;
}
.btn-arrow:hover {
background: #2478ff;
transform: translateY(-3px);
}
.btn-arrow:hover span {
transform: translateX(5px);
}
</style>El detalle de la flecha moviéndose hace que el botón se sienta más dinámico sin ser exagerado.
4. Botón tipo glassmorphism
Este estilo funciona muy bien sobre fondos con degradados, imágenes o secciones modernas. Tiene un efecto translúcido parecido al vidrio.
<a href="#" class="btn-glass">Descargar recurso</a>
<style>
.btn-glass {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
transition: transform 0.25s ease, background 0.25s ease;
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.32);
transform: translateY(-3px);
}
</style>Para que se vea bien, úsalo sobre un fondo azul, oscuro o con imagen. Sobre fondo blanco puede perder fuerza.
5. Botón con efecto brillo
Este botón tiene un efecto de luz que pasa por encima al hacer hover. Es llamativo y funciona bien para llamadas a la acción importantes.
<a href="#" class="btn-shine">Solicitar presupuesto</a>
<style>
.btn-shine {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 30px;
border-radius: 14px;
background: linear-gradient(135deg, #2478ff, #155df5);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 14px 28px rgba(36, 120, 255, 0.25);
transition: transform 0.25s ease;
}
.btn-shine::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(
100deg,
transparent,
rgba(255, 255, 255, 0.55),
transparent
);
transform: skewX(-20deg);
}
.btn-shine:hover {
transform: translateY(-3px);
}
.btn-shine:hover::before {
animation: shineEffect 0.85s ease;
}
@keyframes shineEffect {
from {
left: -120%;
}
to {
left: 140%;
}
}
</style>Usa este efecto con moderación. Es ideal para un botón principal, pero no conviene aplicarlo a todos los botones de una página.
6. Botón oscuro elegante
Este botón es una buena opción para diseños minimalistas, portfolios, páginas de agencia o secciones premium.
<a href="#" class="btn-dark">Ver servicios</a>
<style>
.btn-dark {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 14px;
background: #07142d;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 14px 28px rgba(7, 20, 45, 0.22);
transition: transform 0.25s ease, background 0.25s ease;
}
.btn-dark:hover {
background: #2478ff;
transform: translateY(-3px);
}
</style>El color oscuro transmite solidez y combina muy bien con fondos blancos o secciones claras.
7. Botón ancho para formularios
Este botón es ideal para formularios de contacto, login, registro o newsletters.
<button class="btn-form" type="submit">Enviar mensaje</button>
<style>
.btn-form {
width: 100%;
min-height: 54px;
border: 0;
border-radius: 14px;
background: linear-gradient(135deg, #2478ff, #155df5);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 14px 28px rgba(36, 120, 255, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-form:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(36, 120, 255, 0.3);
}
</style>En formularios, el botón debe ser claro, visible y fácil de pulsar en móvil.
8. Botón responsive para móvil
Este botón se ve normal en escritorio, pero ocupa todo el ancho en pantallas pequeñas. Es muy útil para landing pages y llamadas a la acción.
<a href="#" class="btn-responsive">Contactar ahora</a>
<style>
.btn-responsive {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 14px;
background: #2478ff;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 800;
text-decoration: none;
transition: transform 0.25s ease, background 0.25s ease;
}
.btn-responsive:hover {
background: #155df5;
transform: translateY(-3px);
}
@media (max-width: 600px) {
.btn-responsive {
width: 100%;
}
}
</style>En móvil, muchas veces es mejor que los botones sean anchos para que resulten más cómodos de tocar.
Buenas prácticas al diseñar botones CSS
Un botón debe parecer un botón. Parece obvio, pero muchos diseños fallan porque el usuario no identifica claramente dónde debe hacer clic.
Usa textos cortos y accionables. En lugar de escribir “Haz clic aquí”, es mejor usar frases como:
Ver proyecto
Descargar recurso
Solicitar presupuesto
Empezar ahora
ContactarTambién es importante mantener consistencia. Si el botón principal de tu web es azul, no uses cinco estilos diferentes sin motivo. Define un estilo principal, uno secundario y, si hace falta, una variante especial.
Otro punto clave es el tamaño. Un botón demasiado pequeño puede ser incómodo, especialmente en móvil. Como regla general, usa suficiente padding y una altura mínima cómoda.
Cómo elegir el botón correcto
Si quieres destacar una acción principal, usa un botón con fondo sólido o degradado.
Si quieres mostrar una acción secundaria, usa un botón con borde.
Si necesitas un botón dentro de un formulario, usa un botón ancho.
Si trabajas una landing page, puedes usar un botón con flecha o efecto brillo para dar más dinamismo.
No se trata de usar el botón más llamativo, sino el más adecuado para la acción que quieres que haga el usuario.
Muy importante
Estos snippets de botones modernos con HTML y CSS te permiten mejorar rápidamente el aspecto de tus proyectos web. Puedes copiarlos, cambiar colores, ajustar tamaños y adaptarlos a tu estilo.
Lo importante es que el botón sea claro, visible, cómodo de usar y coherente con el diseño de la página. Un buen botón no solo se ve bonito: ayuda al usuario a tomar una acción.