How To Create & Use Materialize CSS ButtonS?

Materialize CSS Buttons

There are mainly three types of Materialize CSS buttons in the Materialize CSS. The followings are the Materialize CSS buttons:

1. Raised Button
2. Floating Button
3. Flat Button

Raised Button

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>

Floating Button

To create a 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>

Flat Button

To create a flat button, add .btn-flat class to the <button> or <a> element base class.

General Syntax

<a class="waves-effect waves-teal btn-flat">Button</a>

Submit Button

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  </butto

To read more about the Materialize CSS buttons, click here.