Materialize Buttons
Materialize Buttons are used to interact with web pages and perform several actions such as click, form submit, etc. These buttons are:
- Raised Button
- Floating Buttton
- Flat Button
- Submit Button
Raised Button
The raised button is a standard button that is used for action and is mainly used to set the ripple click effect.
Materialize CSS raised button can be created by assigning the .btn class to the <button> or <a> element base class.
General Syntax
<a href="#" class="btn">Button</a>
<button class="btn">Button</button>
Source Code
<div class="row">
<div class="col s12 m6 center-align custom-space--small">
<a href="#" class="btn">Raised Button </a>
</div>
<div class="col s12 m6 center-align">
<button class="btn">Raised Button</button>
</div>
</div>
General Syntax
<a class="btn-floating"><i class="material-icons">add</i></a>
Source Code
<a class="btn-floating btn-large waves-effect waves-light orange">
<i class="material-icons">add</i>
</a>
Flat Button
Flat buttons are used to give a flat display effect to a button and are primarily used to reduce excessive layering. Therefore, it is used inside a card or modal to minimize the overlapping shadows.
To create flat button, add .btn-flat class to the <button> or <a> element base class.
General Syntax
<a class="btn-flat">Button</a>
Source Code
<div class="container center-align">
<a class="waves-effect waves-teal btn-flat">Flat Button</a>
</div>
Submit Button
It is used to submit the form. In short, it is used with a button tag with a submit type rather than using an input tag.
To create submit button, add the .btn class to the <button> element base class and specify button type="submit".
General Syntax
<button class="btn" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
Source Code
<div class="container">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
Disabled Button
To create disabled button, add the .disabled class to the to <button> or <a> element base class.
General Syntax
<a class="disabled">Button</a>
<button class="disabled">Button</button>
Source Code
<div class="container center-align">
<a href="#" class="btn disabled">Disabled Raised Button</a>
</div>
Button Size
Materialized provides mainly two types of button sizes such as small and large button size.
Large Button
Large button can be created by assigning the .btn-large class to the <button> or <a> element base class.
General Syntax
<a class="btn-large">Button</a>
Source Code
<div class="container center-align">
<a class="waves-effect waves-light btn-large">
<i class="material-icons left">cloud</i> button
</a>
</div>
Small Button
To create small button, assign the .btn-small class to the to <button> or <a> element base class.
General Syntax
<a class="waves-effect waves-light btn-small">Button</a>
Source Code
<div class="container center-align">
<a class="waves-effect waves-light btn-small">Small Button</a>
</div>
Conclusion
There are different type of Materialize buttons such as raised button, floating button, flat button and submit button. To create a small & large button, simply use btn-small & btn-large classes correspondingly. You can also disable the button through disabled class.
Web Tutorials
