<div class="button-collection">
<div class="collection-header">
<h2 class="collection-title">Colección de Botones Gradiente</h2>
<p class="collection-subtitle">Botones modernos con efectos de gradiente impresionantes</p>
</div>
<div class="button-grid">
<div class="button-section">
<h3 class="section-title">Gradientes Primarios</h3>
<div class="button-row">
<button class="gradient-btn primary-ocean">
<span class="btn-text">Azul Océano</span>
</button>
<button class="gradient-btn primary-sunset">
<span class="btn-text">Atardecer</span>
</button>
<button class="gradient-btn primary-forest">
<span class="btn-text">Bosque</span>
</button>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.button-collection {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
min-height: 100vh;
padding: 2rem;
color: white;
}
.collection-header {
text-align: center;
margin-bottom: 3rem;
}
.collection-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(45deg, #fff, #e0e7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.collection-subtitle {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 300;
}
.button-grid {
max-width: 1200px;
margin: 0 auto;
}
.button-section {
margin-bottom: 3rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
color: #e0e7ff;
}
.button-row {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.gradient-btn {
position: relative;
padding: 12px 24px;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
color: white;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
min-width: 160px;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.gradient-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.primary-ocean {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.primary-sunset {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.primary-forest {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}