Materialize CSS provides different types of Materialize buttons that are used to perform several actions such as click, etc. These buttons are:
Materialize CSS raised button can be created by assigning the .btn
class to the <button>
or <a>
element base class.
<a href="#" class="btn">Button</a>
<button class="btn">Button</button>
<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>
Floating button can be created easily, by placing the .btn-floating
class to the <button>
or <a>
element's base class
<a class="btn-floating"><i class="material-icons">add</i></a>
<a class="btn-floating btn-large waves-effect waves-light orange">
<i class="material-icons">add</i>
</a>
To create flat button, add .btn-flat
class to the <button>
or <a>
element base class.
<a class="btn-flat">Button</a>
<div class="container center-align">
<a class="waves-effect waves-teal btn-flat">Flat Button</a>
</div>
To create submit button, add the .btn
class to the <button>
element base class and specify button type="submit"
.
<button class="btn" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
<div class="container">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
To create disabled button, add the .disabled
class to the to <button>
or <a>
element base class.
<a class="disabled">Button</a>
<button class="disabled">Button</button>
<div class="container center-align">
<a href="#" class="btn disabled">Disabled Raised Button</a>
</div>
Materialized provides mainly two types of button sizes such as small and large button size.
Large button can be created by assigning the .btn-large
class to the <button>
or <a>
element base class.
<a class="btn-large">Button</a>
<div class="container center-align">
<a class="waves-effect waves-light btn-large">
<i class="material-icons left">cloud</i> button
</a>
</div>
.btn-small
class to the to <button>
or <a>
element base class.<a class="waves-effect waves-light btn-small">Button</a>
<div class="container center-align">
<a class="waves-effect waves-light btn-small">Small Button</a>
</div>