Buttons
Materialize is a modern responsive CSS framework based on Material Design by Google.
Filled (standard)
The filled buttons communicates high emphasized actions. This is the Stadard Button Design. You can add the class filled to the button to provide this style. This should be the main Actions on a Page, so be carful. A good rule of thumb is to add just one primary action per page or field of view.
Standard Button Create addCreate editUpdate
Copied!
content_copy
<a class="btn">Standard Button</a>
<a class="btn filled">Create</a>
<a class="btn filled icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn filled icon-right rounded waves-effect waves-light">
<i class="material-icons">edit</i>Update
</a>
Tonal
Tonal buttons communicates a medium emphasized action. Just add the class tonal to the button. This can be used more often on a page because this are additional Actions next to the primary actions.
Create addCreate addCreate
Copied!
content_copy
<a class="btn tonal">Create</a>
<a class="btn tonal icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn tonal icon-right waves-effect waves-light">
<i class="material-icons">add</i>Create
</a>
Outlined
The outlined button communicates a medium emphasized action. Just add the class outlined to the button.
Create addCreate addCreate
Copied!
content_copy
<a class="btn outlined">Create</a>
<a class="btn outlined icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn outlined icon-right waves-effect waves-light">
<i class="material-icons">add</i>Create
</a>
Elevated
The elevated button is a tonal button with a shadow. This button that signify medium emphazied actions and seek to give depth to a mostly flat page. Try to only use shadows when absolutely neccessary, to prevent shadow creep. Also keep in mind that on darker backgrounds the shadows are not really good visible.
Create addCreate addCreate Create addCreate
Copied!
content_copy
<a class="btn elevated">Create</a>
<a class="btn elevated">
<i class="material-icons left">add</i>Create
</a>
<a class="btn elevated">
<i class="material-icons right">add</i>Create
</a>
<a class="btn elevated rounded">Create</a>
<a class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
Text
Text buttons are used to reduce excessive layering and communicate low emphasis actions. For example, text buttons are used for actions within a card or modal so there are not too many overlapping shadows.
Create addCreate
Copied!
content_copy
<a tabindex="0" class="btn text">Create</a>
<button class="btn text icon-left">
<i class="material-icons">add</i>Create
</button>
<a tabindex="0" class="btn text icon-right waves-effect">
<i class="material-icons">add</i>Create
</a>
Floating
add
Copied!
content_copy
<a class="btn-floating btn-large waves-effect waves-light">
<i class="material-icons">add</i>
</a>
Floating Action Button
A circular material button that lifts and displays an ink reaction on press. See the documentation on this page
Helpers
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
Copied!
content_copy
<button class="btn icon-right waves-effect waves-light" type="submit" name="action">
Submit<i class="material-icons right">send</i>
</button>
Large
This button has a larger height for buttons that need more attention.
Button cloudbutton cloudbutton
Copied!
content_copy
<a class="btn-large waves-effect waves-light">Button</a>
<a class="btn-large icon-left waves-effect waves-light">
<i class="material-icons">cloud</i>button
</a>
<a class="btn-large icon-right waves-effect waves-light ">
<i class="material-icons">cloud</i>button
</a>
Small
When mouse and keyboard are the primary input methods, this smaller button is useful for denser UI layouts.
Button cloudbutton cloudbutton
Copied!
content_copy
<a class="btn-small waves-effect waves-light">Button</a>
<a class="btn-small icon-left waves-effect waves-light">
<i class="material-icons">cloud</i>button
</a>
<a class="btn-small icon-right waves-effect waves-light">
<i class="material-icons">cloud</i>button
</a>