Tips Membuat Efek Glow pada Tombol dengan CSS3

Hallo teman-teman, hari ini kita akan belajar bagaimana membuat sebuah tombol animasi yang memberikan efek glow dengan menggunakan CSS3. Teman-teman tahukan apa itu glow? Ya benar, Glow memiliki arti bersinar atau bercahaya. Tombol yang akan kita buat memiliki efek bersinar yang berulang-ulang ketika dilakukan hover.

Coba teman-teman perhatikan demo dibawah ini :

See the Pen Bsydk by Rully Febrian (@rully) on CodePen.

Sekarang teman-teman bisa langsung copy paste kodenya dan jalankan di browser. Dalam tutorial ini teman-teman bisa mengubah warna text-shadow dan nilai transisinya. animation-iteration-count: infinite;merupakan properti yang bertugas untuk membuat perulangan efek ketika di hover, sedangkan @keyframe mendefinisikan fungsi animasi dimana terdapat pengaturan opacity box-shadow dari 0% sampai 100%. ease-in-out merupakan fungsi waktu dengan proses efek dari dalam ke luar.

Demikian tutorial animasi ini semoga bermanfaat bagi teman-teman sampai bertemu di tutorial berikutnya. Terima Kasih dan Selamat Mencoba.

DOWNLOAD