There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.
The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.
<a class="waves-effect waves-light btn">button</a><a class="waves-effect waves-light btn"><i class="material-icons left">settings_backup_restore</i>button</a><a class="waves-effect waves-light btn"><i class="material-icons right">gps_fixed</i>button</a><a class="waves-effect btn-flat">Button</a>Floating Button
When you use a button to submit a form,instead of using a input tag,use a button tag with a type submit
<button class="btn waves-effect waves-light " type="submit" name="action">Submit</button><button class="btn waves-effect waves-light " type="submit" name="action">Reply <i class="material-icons left">reply</i></button><button class="btn waves-effect waves-light " type="submit" name="action">Send <i class="material-icons right">send</i></button>This button has a larger height for buttons that need more attention.
<a class="waves-effect waves-light btn-large">Button</a><a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a><a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>When mouse and keyboard are the primary input methods,this smaller button is useful for denser UI layouts.
<a class="waves-effect waves-light btn-small">Button</a><a class="waves-effect waves-light btn-small"><i class="material-icons left">cloud</i>button</a><a class="waves-effect waves-light btn-small"><i class="material-icons right">cloud</i>button</a>