===================================================
<div style="display:flex;justify-content:center;align-items:center;padding:25px;background:transparent;">
<style>
.whatsapp-premium{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
width:100%;
max-width:420px;
padding:16px 28px;
border-radius:70px;
background:linear-gradient(135deg,#25D366,#20BD5A);
color:#fff;
font-family:Segoe UI,Arial,sans-serif;
font-size:18px;
font-weight:700;
text-decoration:none;
border:2px solid rgba(255,255,255,.35);
overflow:hidden;
backdrop-filter:blur(15px);
box-shadow:
0 0 15px rgba(37,211,102,.35),
0 0 30px rgba(37,211,102,.25),
0 10px 35px rgba(0,0,0,.18),
inset 0 1px 2px rgba(255,255,255,.6);
transition:.35s;
}
/* Kilauan terus berjalan */
.whatsapp-premium::before{
content:"";
position:absolute;
top:-70%;
left:-60%;
width:40%;
height:250%;
background:linear-gradient(
90deg,
rgba(255,255,255,0),
rgba(255,255,255,.65),
rgba(255,255,255,0));
transform:rotate(25deg);
animation:shine 3.8s linear infinite;
}
@keyframes shine{
0%{
left:-70%;
}
100%{
left:150%;
}
}
/* Glow Hover */
.whatsapp-premium:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:
0 0 20px rgba(37,211,102,.6),
0 0 45px rgba(37,211,102,.45),
0 18px 45px rgba(0,0,0,.25);
}
/* Ikon */
.wa-icon{
width:30px;
height:30px;
fill:white;
animation:pulse 2s infinite;
}
@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.12);}
100%{transform:scale(1);}
}
/* Tooltip */
.whatsapp-premium::after{
content:"Ikuti Saluran WhatsApp Iskandar Dorman";
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%);
background:#111;
color:white;
padding:10px 14px;
font-size:13px;
border-radius:10px;
white-space:nowrap;
opacity:0;
transition:.35s;
pointer-events:none;
box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.whatsapp-premium:hover::after{
opacity:1;
bottom:132%;
}
/* Efek Klik */
.whatsapp-premium:active{
transform:scale(.98);
}
@media(max-width:600px){
.whatsapp-premium{
font-size:16px;
padding:15px 20px;
}
.wa-icon{
width:26px;
height:26px;
}
}
</style>
<a class="whatsapp-premium"
href="https://whatsapp.com/channel/0029Vac1kt89MF8vzAdB4f1w"
target="_blank"
title="Ikuti Saluran WhatsApp Iskandar Dorman">
<svg class="wa-icon" viewBox="0 0 32 32">
<path d="M19.11 17.2c-.29-.15-1.71-.84-1.98-.93-.26-.1-.45-.15-.64.15-.19.29-.74.93-.91 1.12-.17.19-.34.22-.63.07-.29-.15-1.22-.45-2.33-1.43-.86-.77-1.44-1.72-1.61-2.01-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.07-.15-.64-1.54-.88-2.11-.23-.55-.46-.47-.64-.48h-.55c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.03 2.81 1.18 3 .14.19 2.03 3.1 4.92 4.35.69.3 1.22.48 1.64.61.69.22 1.31.19 1.8.12.55-.08 1.71-.7 1.95-1.38.24-.68.24-1.26.17-1.38-.07-.12-.26-.19-.55-.34z"/>
<path d="M16.03 3C8.85 3 3.03 8.81 3.03 15.98c0 2.52.74 4.97 2.13 7.07L3 29l6.17-2.08a12.9 12.9 0 006.86 1.97h.01c7.17 0 12.98-5.82 12.98-13S23.2 3 16.03 3zm0 23.62c-2.08 0-4.11-.56-5.88-1.62l-.42-.25-3.66 1.23 1.2-3.56-.27-.44a10.59 10.59 0 01-1.63-5.67c0-5.85 4.77-10.62 10.64-10.62 5.86 0 10.63 4.77 10.63 10.63 0 5.86-4.77 10.63-10.61 10.63z"/>
</svg>
<span>Ikuti Saluran WhatsApp</span>
</a>
</div>
Tidak ada komentar:
Posting Komentar