Membuat Animasi Tombol Bercahaya dengan CSS

20/03/2020    Maykhel David    57     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.

Buat sebuah Link atau Button

<!-- link anchor -->
<a href="#" class="button">Click here!</a>

<!-- button -->
<button type="submit" class="button">Click here!</button>

 

Menambahkan Style ke Button atau Link

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;
}

 

Menambahkan Animasi dengan CSS

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:

  • 0% adalah titik awal yang mendefinisikan warna hijau latar belakang dan warna hijau bayangan di sekitar tombol dengan jarak blur 3px.
  • 50% adalah titik tengah yang mendefinisikan warna hijau muda dari latar belakang dan warna hijau muda dari bayangan di sekitar tombol dengan jarak blur 10px.
  • 100% adalah titik akhir yang didefinisikan sebagai keyframe 0%

Baiklah, demikian artikel kali ini yang membahas tentang bagaimana cara membuat animasi tombol bercahaya dengan css, sampai jumpa di artikel selanjutnya

Bonus

HTML CSS, Tips dan Trik

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More