Membuat Animasi Tombol Bercahaya dengan CSS

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.

Buat sebuah Link atau Button

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


<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

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { margin: 0; } .wrapper { display: flex; height: 20vh; flex-direction: row; justify-content: center; align-items: center; } .button { border: 1px transparent; -webkit-border-radius: 40px; border-radius: 40px; color: #eeeeee; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 8px 30px; text-align: center; text-decoration: none; margin-left: 20px; -webkit-animation: glowing 1300ms infinite; -moz-animation: glowing 1300ms infinite; -o-animation: glowing 1300ms infinite; animation: glowing 1300ms infinite; } @-webkit-keyframes glowing { 0% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; } 50% { background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; } 100% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; } } @keyframes glowing { 0% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; } 50% { background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; } 100% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; } } .svg-btn { display: block; width: 230px; height: 230px; margin-left: 10px; } svg { fill: blue; -webkit-animation: glowing-polygon 1300ms infinite; -moz-animation: glowing-polygon 1300ms infinite; -o-animation: glowing-polygon 1300ms infinite; animation: glowing-polygon 1300ms infinite; } @-webkit-keyframes glowing-polygon { 0% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); } 50% { fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); } 100% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); } } @keyframes glowingPolygon { 0% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); } 50% { fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); } 100% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); } } </style> </head> <body> <h2>Create flashing/glowing button</h2> <div class="wrapper"> <a class="button" href="#">Click here!</a> <button type="submit" class="button">Click here!</button> <a class="svg-btn"> <svg height="210" width="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/> </svg> </a> </div> </body> </html>

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