Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya dalam pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Implementasi Waves Pada Framework Materialize dimana fungsi waves pada materialize ini adalah efek lain dari button. Efek yang di hasilkan dari waves ini ketika button di klik maka efek warna akan memudar pada bagian button. Di bawah ini adalah 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 tentang Cara Implementasi Waves Pada Framework Materialize sebentar lagi kita akan mempraktekkan. Teman – teman ikuti terus, pertama – tama siapkan file materialize nya dan text editornya bisa kunjungi website resminya http://materializecss.com kemudian buat sebuah button
<a class="Default btn-large" href="#">Home</a>
Kemudian tambahkan pada class waves-effect
Maka akan menghasilkan efek default waves-effect pada saat di klik akan menimbulkan background warna gray atau abu – abu. Nah untuk tahu lebih lanjut teman – teman ketikkan script di bawah ini yang sudah 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>
Maka akan menghasilkan output seperti gambar di bawah ini
Kemudian teman – teman klik pada setiap button, maka kalian akan melihat perbedaan dari efek macam – macam class waves nya. Kita juga bisa menambahkan icon, misalkan saya ingin menambahkan icon
Maka jika kita masukkan dalam button, maka hasilnya seperti gambar di bawah ini
Untuk menjalankan icon pada materialize teman – teman jangan lupa sertakan link icon materialize nya di dalam tag head
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Masukkan icon nya dik dalam tag <a>
<i class=”large material-icons”>arrow_downward</i>
Bagaimana, sangat mudah bukan..??
Mungkin sekian dulu pada artikel kali ini tentang Cara Implementasi Waves Pada Framework Materialize kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.
Semoga bermanfaat.