Colored Button

button button button button button button

                                    
                                        <a class="waves-effect waves-light btn red">button</a>
                                        <a class="waves-effect waves-light btn blue">button</a>
                                        <a class="waves-effect waves-light btn green">button</a>
                                        <a class="waves-effect waves-light btn purple">button</a>
                                        <a class="waves-effect waves-light btn indigo">button</a>
                                        <a class="waves-effect waves-light btn orange">button</a>
                                    
                                

Round Button

button button button button button button

                                    
                                        <a class="waves-effect waves-light btn btn-round red">button</a>
                                        <a class="waves-effect waves-light btn btn-round blue">button</a>
                                        <a class="waves-effect waves-light btn btn-round green">button</a>
                                        <a class="waves-effect waves-light btn btn-round purple">button</a>
                                        <a class="waves-effect waves-light btn btn-round indigo">button</a>
                                        <a class="waves-effect waves-light btn btn-round orange">button</a>
                                    
                                

Raised Button

button cloudbutton cloudbutton

                                    
                                        <a class="waves-effect waves-light btn">button</a>
                                        <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
                                        <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
                                    
                                

Floating Button

add

                                    
                                        <a class="btn-floating btn-large waves-effect waves-light teal"><i class="material-icons">add</i></a>
                                    
                                

Flat Button

Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.

Button

                                    
                                        <a class="waves-effect waves-teal btn-flat">Button</a>
                                    
                                

Submit Button

When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit

Submitsend

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

Large Button

This button has a larger height for buttons that need more attention.

Button cloudbutton cloudbutton

                                    
                                        <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>
                                    
                                

Small Button

When mouse and keyboard are the primary input methods, this smaller button is useful for denser UI layouts.

Button cloudbutton cloudbutton

                                    
                                        <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>
                                    
                                

Disabled Button

This style can be applied to all button types

Button Button Button add

                                    
                                        <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>