Cara Implementasi Waves Pada Framework Materialize
Selamat datang kembali di situs tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia situs. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Implementasi Waves Pada Framework Materialize dimana kegunaan waves di materialize ini ialah efek lain dari button. Efek yang di hasilkan dari waves ini ketika button di klik karenanya efek warna akan memudar di bagian button. Di bawah ini ialah nama – nama class mempunyai perbedaan warna
- Default
- waves-light
- waves-red
- waves-yellow
- waves-orange
- waves-purple
- waves-green
- waves-teal
Dari masing – masing class ini terdapat efek yang berbeda dimana efek di bedakan dengan warna nya. Simak terus artikel kali ini mengenai Cara Implementasi Waves Pada Framework Materialize sebentar lagi kita akan mempraktekkan. Teman – teman ikuti terus, pertama-tama – tama siapkan file materialize nya dan text editornya dapat kunjungi situs resminya http://materializecss.com kemudian bikin sebuah button
<a class=Default btn-large href=#>Home</a>
Kemudian tambahkan di class waves-effect
Karenanya akan menghasilkan efek default waves-effect di ketika di klik akan menimbulkan background warna gray atau abu – abu. Nah bagi tahu lebih lanjut teman – teman ketikkan script di bawah ini yang telah saya berikan masing – masing class waves nya
<a class=waves-effect Default btn-large href=#>Home</a>
<a class=waves-effect waves-light btn-large href=#>About</a>
<a class=waves-effect waves-red btn-large href=#>Contact Us</a>
<a class=waves-effect waves-yellow btn-large href=#>Gallery</a>
<a class=waves-effect waves-orange btn-large href=#>History</a>
<a class=waves-effect waves-purple btn-large href=#>Food</a>
<a class=waves-effect waves-green btn-large href=#>Dring</a>
<a class=waves-effect waves-teal btn-large href=#>Service</a>
Karenanya akan menghasilkan output seperti gambar di bawah ini
Kemudian teman – teman klik di setiap button, karenanya kalian akan melihat perbedaan dari efek macam – macam class waves nya. Kita pun dapat menambahkan icon, misalkan saya ingin menambahkan icon
Karenanya jikalau kita masukkan pada button, karenanya hasilnya seperti gambar di bawah ini
Bagi menjalankan icon di materialize teman – teman jangan lupa sertakan link icon materialize nya di pada tag head
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel=stylesheet>
Masukkan icon nya dik pada tag <a>
<i class=”large material-icons”>arrow_downward</i>
Bagaimana, benar-benar gampang bukan..??
Mungkin demikian dulu di artikel kali ini mengenai Cara Implementasi Waves Pada Framework Materialize kita jumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa.
Semoga bermanfaat.
Sumber https://kursuswebsite.org
