There are mainly three types of pure Materialize CSS buttons. The followings are the Materialize CSS buttons:
To create Materialize CSS raised button, add .btn
class to the <button>
or <a>
element base class.
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
To create 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
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
To create submit button, add .btn
class to the <button>
tag with a type submit.
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
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
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
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