Materialize CSS Buttons
There are mainly three types of Materialize CSS buttons, namely raised, float, and flat buttons. These buttons are used to click, submit forms, and engage with various web components. These Materialize buttons are:
- Raised Button
- Floating Button
- Flat Button
Raised Button
These buttons have ripple click effect and used to perform an action. To create a raised button in Materialize CSS, add .btn class to the
<button> or <a> element.
General Syntax
<a href="#" class="btn">Raised Button</a>
<button class="btn">Raised Button</button>
Source Code
<div class="container center-align">
<h4>Materialize CSS Button</h4>
<a href="#" class="btn">Raised Button</a>
<button class="btn">Raised Button</button>
</div>
Source Code: Output
Materialize CSS Button
Raised ButtonFloating Buttton
To create a Materialize CSS floating button, add .btn-floating as well as additional color classes to the <button> or <a> element base class
General Syntax
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
Source Code
<div class="container center-align">
<h4>Materialize CSS Floating Button</h4>
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
</div>
Source Code: Output
Materialize CSS Floating Button
addFlat Button
Materialize Flat buttons are used to reduce excessive layering and mainly used inside the card or modal to perform action. To create flat button, add .btn-flat class to the <button> or <a> element base class.
Source Code
<div class="container center-align">
<a class="waves-effect waves-teal btn-flat">Flat Button</a>
</div>
Source Code: Output
Submit Button
The purpose of it is to send the form to the server. To create it, add .button class to the button element having type submit rather than using an input tag.
General Syntax
<button class="btn waves-effect waves-light" type="submit" name="action">Submit </button>
Source Code
<div class="container center-align">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
Source Code: Output
Materialize CSS Button Size
Large Button
To create large button, add .btn-large to the to <button> or <a> element base class.
Source Code
<div class="container">
<a class="waves-effect waves-light btn-large">Button</a>
</div>
Source Code: Output
Small Button
To create small button, add .btn-small class to the to <button> or <a> element base class.
Source Code
<div class="container">
<h4>Small Button</h4>
<a class="waves-effect waves-light btn-small">Small Button</a>
</div>
Source Code: Output
Small Button
Small ButtonDisabled Button
To create disabled button, add .disabled class to the to <button> or <a> element base class.
Source Code
<div class="container">
<h4>Disabled Button</h4>
<a class="btn-large disabled">Disabled Button</a>
</div>
Source Code: Output
Disabled Button
Disabled ButtonWeb Tutorials
