DemoAternum – My WordPress Blog

<div class="btn-aeternum-wrapper">

<a href="https://wa.me/593999999999?text=Hola%20Aeternum,%20deseo%20agendar%20una%20cita"
target="_blank"
rel="noopener noreferrer"
class="btn-aeternum">

<span class="btn-aeternum-shimmer"></span>

<span class="btn-aeternum-icon">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.007c.106.005.249-.04.39.299.144.347.491 1.2.534 1.288.043.088.072.19.014.305-.058.115-.087.187-.173.289l-.26.308c-.087.087-.179.182-.077.357.101.174.452.746.969 1.206.666.592 1.227.775 1.401.862.173.087.275.072.376-.044.101-.115.433-.505.549-.679.116-.173.231-.144.39-.086s1.011.477 1.184.564.289.13.332.202c.045.072.045.42-.099.825zm-3.392-10.416c-5.518 0-10 4.482-10 10 0 1.93.55 3.734 1.503 5.269l-1.543 5.642 5.807-1.523c1.477.882 3.208 1.383 5.05 1.383 5.518 0 10-4.482 10-10s-4.482-10-10-10z"/>
</svg>
</span>

<span class="btn-aeternum-text">Agendar mi valoración</span>

<span class="btn-aeternum-arrow">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</span>
</a>
</div>

/* Botón Principal */
.btn-aeternum {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
background: linear-gradient(135deg, #201611 0%, #2f221a 100%);
color: #FAF7F2 !important;
text-decoration: none !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
border-radius: 50px;
border: 1px solid rgba(231, 217, 205, 0.35);
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 20px -4px rgba(32, 22, 17, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto de destello / luz que cruza el botón */
.btn-aeternum-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.18) 50%,
transparent 100%
);
transform: skewX(-25deg);
transition: all 0.75s ease;
}

/* Círculo del ícono */
.btn-aeternum-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(132, 133, 96, 0.35); /* Tono oliva del manual */
color: #FAF7F2;
transition: transform 0.3s ease, background 0.3s ease;
}

.btn-aeternum-text {
position: relative;
z-index: 2;
}

.btn-aeternum-arrow {
display: flex;
align-items: center;
transition: transform 0.3s ease;
opacity: 0.8;
}

/* ESTADOS HOVER (AL PASAR EL CURSOR) */
.btn-aeternum:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #2a1e17 0%, #3d2c22 100%);
border-color: rgba(194, 166, 117, 0.8); /* Borde dorado */
box-shadow: 0 14px 28px -6px rgba(32, 22, 17, 0.45),
0 0 18px rgba(194, 166, 117, 0.3);
color: #FFFFFF !important;
}

.btn-aeternum:hover .btn-aeternum-shimmer {
left: 180%;
}

.btn-aeternum:hover .btn-aeternum-icon {
transform: scale(1.1);
background: #848560;
}

.btn-aeternum:hover .btn-aeternum-arrow {
transform: translateX(4px);
opacity: 1;
}

/* Click presionado */
.btn-aeternum:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(32, 22, 17, 0.3);
}
</style>

Uncategorized

Hello world!

admin / septiembre 11, 2026

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!