Tus botones HTML estilizados, Aquí tienes una versión de los 10 botones estilizados, ahora con:
🔗 Iconos integrados (usando emojis para simplicidad y compatibilidad)
🎨 Animaciones al pasar el cursor
🖱️ Efectos hover
CÓDIGO HTML (Botones HTML).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Botones con Estilo</title>
<style>
body { font-family: Arial, sans-serif; padding: 2em; background: #f4f4f4; }
.btn {
display: inline-block;
margin: 10px;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 6px;
transition: all 0.3s ease;
position: relative;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn1 { background: #005a9c; color: white; }
.btn2 { background: #f44336; color: white; }
.btn3 { background: linear-gradient(to right, #4CAF50, #81C784); color: white; }
.btn4 { background: #fff; color: #333; border: 2px solid #333; }
.btn5 { background: #ff9800; color: white; text-transform: uppercase; letter-spacing: 1px; }
.btn6 { background: #673ab7; color: white; font-style: italic; }
.btn7 { background: #009688; color: white; border: 2px dashed #004d40; }
.btn8 { background: #e91e63; color: white; border-radius: 50px; }
.btn9 { background: #607d8b; color: white; font-family: monospace; }
.btn10 { background: transparent; color: #000; border: 2px dotted #000; }
/* Icon styling */
.btn::before {
content: attr(data-icon);
margin-right: 8px;
}
</style>
</head>
<body>
<a href="https://www.ee3.es" class="btn btn1" data-icon="🔗">Botón 1</a>
<a href="https://www.ee3.es" class="btn btn2" data-icon="🔥">Botón 2</a>
<a href="https://www.ee3.es" class="btn btn3" data-icon="🌿">Botón 3</a>
<a href="https://www.ee3.es" class="btn btn4" data-icon="📄">Botón 4</a>
<a href="https://www.ee3.es" class="btn btn5" data-icon="⚡">Botón 5</a>
<a href="https://www.ee3.es" class="btn btn6" data-icon="🎓">Botón 6</a>
<a href="https://www.ee3.es" class="btn btn7" data-icon="🛡️">Botón 7</a>
<a href="https://www.ee3.es" class="btn btn8" data-icon="💬">Botón 8</a>
<a href="https://www.ee3.es" class="btn btn9" data-icon="🧠">Botón 9</a>
<a href="https://www.ee3.es" class="btn btn10" data-icon="📎">Botón 10</a>
</body>
</html>
🛠️ ¿Qué puedes hacer ahora?
- Cambiar los emojis por íconos SVG o Font Awesome si prefieres más control visual.
- Ajustar colores, bordes o efectos para que encajen con tu sitio.
- Usar estos botones como enlaces a secciones específicas o recursos destacados.
Versión avanzada de los 10 botones estilizados, ahora con:
- 🎨 Animaciones suaves al pasar el cursor
- 🖱️ Efectos hover con transición
- 📦 Íconos SVG integrados (sin depender de librerías externas)
- 📱 Diseño responsivo para que se adapten a móviles y pantallas pequeñas
CÓDIGO HTML
Estos botones se adaptan automáticamente a pantallas pequeñas, tienen íconos SVG integrados (sin librerías externas), y ofrecen una experiencia visual moderna y fluida.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Botones SVG Estilizados</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 2em;
background: #f4f4f4;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: flex;
align-items: center;
gap: 10px;
margin: 10px;
padding: 12px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 8px;
transition: all 0.3s ease;
color: white;
min-width: 180px;
justify-content: center;
}
.btn svg {
width: 20px;
height: 20px;
fill: white;
transition: transform 0.3s ease;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn:hover svg {
transform: rotate(10deg);
}
.btn1 { background: #005a9c; }
.btn2 { background: #f44336; }
.btn3 { background: linear-gradient(to right, #4CAF50, #81C784); }
.btn4 { background: #333; }
.btn5 { background: #ff9800; }
.btn6 { background: #673ab7; }
.btn7 { background: #009688; }
.btn8 { background: #e91e63; }
.btn9 { background: #607d8b; }
.btn10 { background: #000; }
@media (max-width: 600px) {
.btn {
flex-direction: column;
min-width: 140px;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- Botón 1 -->
<a href="https://www.ee3.es" class="btn btn1">
<svg viewBox="0 0 24 24"><path d="M3.9,12a5.1,5.1,0,0,1,5.1-5.1h4V4H9A8,8,0,0,0,1,12a8,8,0,0,0,8,8h4V17.1H9A5.1,5.1,0,0,1,3.9,12Z"/></svg>
Enlace 1
</a>
<!-- Botón 2 -->
<a href="https://www.ee3.es" class="btn btn2">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7v6c0 5.25 3.75 10 10 10s10-4.75 10-10V7l-10-5z"/></svg>
Enlace 2
</a>
<!-- Botón 3 -->
<a href="https://www.ee3.es" class="btn btn3">
<svg viewBox="0 0 24 24"><path d="M12 4.5C7.05 4.5 3 8.55 3 13.5S7.05 22.5 12 22.5 21 18.45 21 13.5 16.95 4.5 12 4.5z"/></svg>
Enlace 3
</a>
<!-- Botón 4 -->
<a href="https://www.ee3.es" class="btn btn4">
<svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"/></svg>
Enlace 4
</a>
<!-- Botón 5 -->
<a href="https://www.ee3.es" class="btn btn5">
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20z"/></svg>
Enlace 5
</a>
<!-- Botón 6 -->
<a href="https://www.ee3.es" class="btn btn6">
<svg viewBox="0 0 24 24"><path d="M12 12l8-5-8-5-8 5z"/></svg>
Enlace 6
</a>
<!-- Botón 7 -->
<a href="https://www.ee3.es" class="btn btn7">
<svg viewBox="0 0 24 24"><path d="M12 2l4 4H8l4-4zm0 20l-4-4h8l-4 4z"/></svg>
Enlace 7
</a>
<!-- Botón 8 -->
<a href="https://www.ee3.es" class="btn btn8">
<svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 0 10 5 5 0 0 1 0-10z"/></svg>
Enlace 8
</a>
<!-- Botón 9 -->
<a href="https://www.ee3.es" class="btn btn9">
<svg viewBox="0 0 24 24"><path d="M3 12h18v2H3z"/></svg>
Enlace 9
</a>
<!-- Botón 10 -->
<a href="https://www.ee3.es" class="btn btn10">
<svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>
Enlace 10
</a>
</body>
</html>