Materialize Buttons: Materialize Provides the inbuilt classes to create different buttons with effects. It is very simple to create buttons in Materialize framework. Here in this tutorial we are going to explain how you can create buttons in Materialize framework. You can also use our online editor to edit and
run the code online.
Materialize Buttons Example
There are following types of Buttons Available in Materialize-
- →Raised
- →Floating
There are basically four types of floating buttons –
1. Fixed Action
2. Horizontal FAB
3. Click Only FAB
4. Toolbar FAB - →Flat
- →Submit
- →Large
- →Disabled
Let us go one by one to understand the above button types.
Raised Button
You can create Raised Button simply as below –
Materialize Raised Buttons | Example:
Raised Button<br/>
<i class="material-icons left">shop</i> Raised Button With Icon
|
If you will run the above example it will produce the output something like this –
Floating Button
Class btn-floating is used to create floating button in Materialize. Here is an example of floating button –
If you run the above example it will produce the following output –
Fixed Action Button
You can create fixed action which can contain multiple action that will appear on hover-
Materialize Floating Action Button Example:
<div class="fixed-action-btn">
<i class="large material-icons">mode_edit</i>
<ul>
<li><i class="material-icons">insert_chart</i></li>
<li><i class="material-icons">format_quote</i></li>
<li><i class="material-icons">publish</i></li>
<li><i class="material-icons">attach_file</i></li>
</ul>
</div>
|
If you run the above example it will produce the output something like this –
Horizontal Fab
Class horizontal is used to create horizontal fab button. You can create Horizontal Fab simply as below –
Materialize Horizontal Fab Button Example:
<div class="fixed-action-btn horizontal">
<i class="large material-icons">mode_edit</i>
<ul>
<li><i class="material-icons">insert_chart</i></li>
<li><i class="material-icons">format_quote</i></li>
<li><i class="material-icons">publish</i></li>
<li><i class="material-icons">attach_file</i></li>
</ul>
</div>
|
If you run the above example it will produce the output something like this –
Click Only Fab
If you want to open the option only on click, add the class click-to-toggle simply as below –
Materialize Click Only Fab Button Example:
<div class="fixed-action-btn horizontal click-to-toggle">
<i class="large material-icons">mode_edit</i>
<ul>
<li><i class="material-icons">insert_chart</i></li>
<li><i class="material-icons">format_quote</i></li>
<li><i class="material-icons">publish</i></li>
<li><i class="material-icons">attach_file</i></li>
</ul>
</div>
|
Fab To Toolbar
To create Fab toolbar add class toolbar to the fab. Here is an example of fab toolbar-
Materialize Fab Toolbar Example:
<div class="fixed-action-btn horizontal click-to-toggle toolbar">
<i class="large material-icons">mode_edit</i>
<ul>
<li><i class="material-icons">delete</i></li>
<li><i class="material-icons">format_quote</i></li>
<li><i class="material-icons">publish</i></li>
<li><i class="material-icons">attach_file</i></li>
</ul>
</div>
|
If you run the above example it will produce the output something like this –
Flat Button
Class btn-flat is used to create Flat button in Materialize. Here is an example of flat Button –
Submit Button
Materialize Submit Button Example:
<button class="btn waves-effect waves-light" type="submit" name="action">Submit Form </button> |
Disabled Button
Class disabled is used to create disabled button in materialize.
Materialize Disabled Button Example:
<button class="btn disabled">Disabled Button </button> |
If you run the above example it will produce output something like this –