20/03/2020 Maykhel David 1649 Website
Membuat Animasi Tombol Bercahaya dengan CSS - Hallo semuanya, pernahkah kalian melihat tombol download yang sangat mencolok dan sangat terlihat mata? Dalam tutorial ini, saya akan menunjukkan cara membuat tombol HTML flashing atau glowing atau sebut saja bercahaya hanya dengan CSS murni. Di sini kalian tidak perlu menggunakan JavaScript. Cukup ikuti langkah-langkah yang akan saya berikan.
<!-- link anchor -->
<a href="#" class="button">Click here!</a><!-- button -->
<button type="submit" class="button">Click here!</button>
Maka kalian harus menentukan tampilan tombol dengan bantuan properti CSS:
.button{
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 10px 10px;
text-align: center;
text-decoration: none;
}
Kami membutuhkan bingkai kunci untuk menambahkan animasi. Animasi ini terdiri dari tiga bingkai kunci. Setiap frame kunci mendefinisikan nilai baru untuk warna latar belakang dan properti bayangan kotak.
@keyframes glowing {
0% { background-color: #2ba805; box-shadow: 0 0 3px #2ba805; }
50% { background-color: #49e819; box-shadow: 0 0 10px #49e819; }
100% { background-color: #2ba805; box-shadow: 0 0 3px #2ba805; }
}
Keyframe dalam style untuk animasi:
Baiklah, demikian artikel kali ini yang membahas tentang bagaimana cara membuat animasi tombol bercahaya dengan css, sampai jumpa di artikel selanjutnya
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn MoreMembuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More