VERSI TOMBOL HIJAU
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ==============================
TOMBOL KILAU
============================== */
.glow-button {
position: relative;
display: inline-block;
padding: 15px 32px;
background: linear-gradient(135deg, #25D366, #128C7E);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(18, 140, 126, 0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Efek saat mouse diarahkan */
.glow-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(18, 140, 126, 0.50);
}
/* ==============================
EFEK KILAU BERGERAK
============================== */
.glow-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 55%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.75),
transparent
);
transform: skewX(-20deg);
animation: shine 2.8s infinite;
}
/* Animasi kilau */
@keyframes shine {
0% {
left: -100%;
}
45% {
left: 120%;
}
100% {
left: 120%;
}
}
/* ==============================
TEKS TOMBOL
============================== */
.glow-button span {
position: relative;
z-index: 2;
}
/* ==============================
POSISI TOMBOL
============================== */
.button-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}
</style>
</head>
<body>
<div class="button-wrapper">
<!-- ==================================
UBAH 2 BAGIAN DI BAWAH INI
1. Tulisan tombol
2. Link tujuan
================================== -->
<a
class="glow-button"
href="https://www.contohwebsite.com"
target="_blank"
rel="noopener noreferrer">
<span>
Cek Daftar Harga Disini
</span>
</a>
</div>
</body>
</html>
==============================================
```html
```
Tidak ada komentar:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.