Belajar Materialize #6 : Membuat Tombol Button Materialize

Belajar Materialize #6 : Membuat Tombol Button Materialize – Tombol button banyak kita temukan pada suatu halaman website. Biasanya tombol atau sering di sebut button digunakan untuk menyimpan suatu data yang berasar dari Form.

Sebagai contoh tersedia Form yang datanya di kirim ke database MySQL. Kita dapat membuat tombol yang nantinya akan di proses menggunakan satu bahasa pemrograman misanya PHP.

Cara Membuat Tombol Button Materialize

Tutorial Kali akan akan membahas “bagaimana cara membuat tombol menggunakan framework materialize“. Materialize” banyak menyediakan varian tombol yang lumayan keren.

Tag HTML tombol dapat menggunakan tag <button></button> ataupun dapat menggunakan input form yang bertipe submit. Selain itu tombol juga bisa digunakan untuk membuat LINK halaman website.

Oke, langsung saja mari kita bahas cara membuat tombol button pada materialize.

Cara membuat Tombol pada Materialize

Secara umum variasi tombol dapat dibedakan menjadi 3 yaitu:

  • Hanya berisi Tulisan text.
  • Terdapat Icon di sebelah kiri dan
  • Terdapat Icon di sebelah kanan.

Untuk “membuat tombol pada materialize” dapat menggunakan class dengan nama .btn.

Berukut ini contoh membuat tombol dengan 3 varian. Sebelum membuat tombol kita harus memanggil cloud font google guna untuk menampilkan font di dalam tombol.

Tambahkan kode berikut di dalam head.

Maka kode secara lengkapnya sebagai berikut.

Dan Lihat hasilnya.

Belajar Materialize #6 : Membuat Tombol Button Materialize
Cara membuat Tombol pada Materialize

Maka tombol sudah berhasil di buat dengan ikon dan tidak dengan ikon.

Membuat Tombol Float Button Materialize

Float button merupakan bentuk tombol biasanya bentuknya bulat dan sifat nya static pada posisi manapun. Ketika kita meletakkan button di sisi sebelah kanan bawah dan ketika di lakukan scroll ke bawah, maka posisi button tidak berpindah sedikitpun.

Berikut ini contoh penggunaan float button pada Materialize

Kode di atas merupakan kode yang sebelumnya membuat tombol seperti umumnya dan tombol dengan varian float.

Dan silahkan lihat hasilnya.

Belajar Materialize #6 : Membuat Tombol Button Materialize

Sangat keren bukan ???

Menurut penglihatan sayan float button pada materialize cukup keren, desain yang di sajikan lebih kekinian.

Ukuran Tombol pada Materialize

Ketika kita merancang suatu desain yang kecil maka objek lain juga harus menyesuaikan. Sebagai contoh penggunaan tombol pada ukuran kecil.

Materialize menyajikan 3 varian ukuran tombol yaitu kecil, menengah dan besar. Tanpa anda sadari penerapan membuat tombol tag HTML di atas menggunakan varian meenengah.

DI bawah ini 3 contoh varian tombol

Kode di atas merupakan kode perpaduan dengan kode sebelumnya, saya menambahkan macam-macam ukuran tombol pada materialize.

Jika di jalankan hasilnya seperti gambar di bawah ini.

Belajar Materialize #6 : Membuat Tombol Button Materialize
Ukuran Tombol pada Materialize

Perhatikan gambar di atas, berdasarkan gambar di atas terdapat ukuran tombol sesuai dengan kode yang di tuliskan dengan ukuran gambar besar, sedang dan kecil.

Kesimpulan…

Untuk membuat tombol menggunakan materialize dapat mengguunakan class .btn. Ada beberapa variasi tombol yang keren, salah satunya floating button.

Ukuran tombol di materialize terdapat 3 macam yaitu besar, menengah dan kecil. Lebih lengkapnya baca di https://materializecss.com/buttons.html.

Baca Juga…

One comment

  1. […] Terlihat gambar di atas hanya sebauh text input saja, anda dapat menambahkan tombol / button. Jika belum tahu cara membuatan nya baca tutorial : Belajar Materialize #6 : Membuat Tombol Button Materialize. […]

Leave a Reply