Tips Membuat Efek Glow pada Tombol dengan CSS3

28/06/2014    Rully Febrian    895     Website

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

No data.

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