Cara Membuat Tombol Material Icon di Website dan Blog Anda

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 : Stuff cloudbutton cloudbutton 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 : add edit insert_chart format_quote publish delete remove save cancel 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 :

mode_edit

• insert_chart
• format_quote
• publish
• attach_file
• save
• delete

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 : Button Button Button 5. Submit Button Hasilnya : 6. Large Button cloudbutton cloudbutton cloudbutton Hasilnya : Button cloudbutton cloudbutton cloudbutton 7. Disabled Button Button Button add cloudbutton Hasilnya : Button Button Button add cloudbutton 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.