Implementasi Metode Button Pada Framework Materialize

Selamat datang kembali di website tips dan trik Dumet School, hadir kembali artikel tentang framework materialize. Ya, teman – teman sudah tahu bukan selain framework ini dirancang oleh google tampilan dari hasil framework ini bisa dibilang cukup atraktif dan sangat user friendly sekali. Sebab beberapa efek ada setiap fungsi nya, seperti metode – metode yang kita bahas pada artikel sebelumnya. Pada pembahasan kali ini kita akan Implementasi Metode Button Pada Framework Materialize dimana ada beberapa button, pada kesempatan ini saya ingin mengenalkan sebuah button sekaligus bisa menjadi navigation untuk tampilan mobile. Untuk lebih jelasnya teman – teman bisa lihat gambar di bawah ini

Secara default button menu ada di posisi bawah kanan, ketika di klik maka akan muncul menu icon

Oke langsung saja kita implementasikan Implementasi Metode Button Pada Framework Materialize teman – teman siapkan file materialize nya, kemudian kita akan membuat sebuah button sederhana terlebih dahulu

Disini saya mempunyai script untuk headernya

Kemudian saya custom sedikit css nya,

Berikutnya kita buat sebuh button, pada umumnya button memiliki tampilan default

Kemudian kita tambahkan class btn pada tag buttonnya

Hasil sebuah button default class btn

Untuk merubah background silahkan teman – teman ganti sesuai selera dengan memasukkan class color nya, selanjutnya kita akan membuat sebuah button navigation teman – teman copy script html nya di bawah ini

<div class="row">
  <div class="col s12 m8 l12 ">
	<div class="fixed-action-btn vertical click-to-toggle">
	    <a class="btn-floating btn-large red tooltipped" data-delay="50" data-position="left" data-tooltip="Click Navigation">
	      <i class="material-icons">menu</i>
	    </a>
	    <ul>
	      <li><a class="btn-floating red tooltipped" data-delay="30" data-position="left" data-tooltip="Home"><i class="material-icons">home</i></a></li>
	      <li><a class="btn-floating yellow darken-1 tooltipped" data-delay="50" data-position="left" data-tooltip="Gallery Foto"><i class="material-icons">photo_library</i></a></li>
	      <li><a class="btn-floating green tooltipped" data-delay="50" data-position="left" data-tooltip="Contact Us"><i class="material-icons">contacts</i></a></li>
	      <li><a class="btn-floating blue tooltipped" data-delay="50" data-position="left" data-tooltip="Shopping Cart"><i class="material-icons">shopping_cart</i></a></li>
	    </ul>
	  </div> 
</div>
</div>

Pastekan pada file index nya, save dan refresh pada browsernya, maka button navigation nya berhasil kita buat

Jika di klik maka navigation atau menu akan muncul

Menarik sekali bukan..??

Sekian pada artikel kali ini tentang Implementasi Metode Button Pada Framework Materialize untuk pembahasan lanjutnya kita bahas pada artikel yang akan datang, semoga bermanfaat. Terimakasih dan sampai jumpa.

The post Implementasi Metode Button Pada Framework Materialize appeared first on Kursus Website Terbaik.