Membuat Button/Tombol dengan Menggunakan Materialize CSS

Sebuah web tidak lepas dengan adanya Button/tombol. Button yang menarik dapat membuat pengunjung web nyaman.

Pada postingan kali ini akan membahas komponen Materialize yaitu Button.

1. Raised

<a class="waves-effect waves-light btn red">Stuff</a>
<a class="waves-effect waves-light btn blue"><i class="material-icons left-align">cloud</i>button</a>
<a class="waves-effect waves-light btn black"><i class="material-icons right">cloud</i>button</a>

Hasilnya :

2. Floating

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
<a class="btn-floating btn-large waves-effect waves-light blue"><i class="material-icons">edit</i></a>
<a class="btn-floating btn-large waves-effect waves-light green"><i class="material-icons">insert_chart</i></a>
<a class="btn-floating btn-large waves-effect waves-light orange"><i class="material-icons">format_quote</i></a>
<a class="btn-floating btn-large waves-effect waves-light yellow"><i class="material-icons">publish</i></a>
<a class="btn-floating btn-large waves-effect waves-light black"><i class="material-icons">delete</i></a>
<a class="btn-floating btn-large waves-effect waves-light blue-grey"><i class="material-icons">remove</i></a>
<a class="btn-floating btn-large waves-effect waves-light purple"><i class="material-icons">save</i></a>
<a class="btn-floating btn-large waves-effect waves-light pink"><i class="material-icons">cancel</i></a>

Hasilnya :

3. Fixed Action Button

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons purple">mode_edit</i>
    </a>    
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
      <li><a class="btn-floating orange"><i class="material-icons">save</i></a></li>
      <li><a class="btn-floating purple"><i class="material-icons">delete</i></a></li>
    </ul>
  </div>

Hasilnya :

Button ini melayang yang berada di pojok kanan bawah website, jika button di sorot maka akan muncul seperti gambar di bawah :

4. Flat

<a class="waves-effect waves-teal btn-flat">Button</a>
<a class="waves-effect waves-teal btn-flat blue white-text">Button</a>
<a class="waves-effect waves-teal btn-flat green white-text">Button</a>

Hasilnya :

5. Submit Button

<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
  <button class="btn waves-effect waves-light yellow black-text" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
  <button class="btn waves-effect waves-light deep-orange" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>

Hasilnya :

6. Large

<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large pink"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large grey"><i class="material-icons right">cloud</i>button</a>
<a class="waves-effect waves-light btn-large lime black-text"><i class="material-icons right">cloud</i>button</a>

Hasilnya :

7. Disabled

<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>
<a class="btn-large  disabled"><i class="material-icons right">cloud</i>button</a>

Hasilnya :

Bagaimana?Keren-keren bukan?

Silahkan kalian pelajari, untuk warna dan jenis-jenis button. Bereksperimen itu menyenangkan.

Demikian postingan Membuat Button/Tombol dengan Menggunakan Materialize CSS. Semoga bermanfaat dan terimakasih.