Materialize buttons | how to use button class

Deepak Tailor Image
Deepak Tailor - Jan 18 2021
Materialize buttons | how to use button class

We have been given several types of buttons in Materialize CSS. Like as raised buttons, floating action buttons, flat buttons , disabled buttons etc.

Simple & Raised buttons
Live Demo
<a href="" class="waves-effect waves-light btn">button</a>
<button type="submit" class="waves-effect waves-light btn">button</button>
<a href="" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a href="" class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
Simple button without waves effect
<button type="button" class="btn">Simple Button</button>
Bootstrap multi color buttons
Live Demo
<button type="button" class="btn waves-effect waves-light blue">Primary Button</button>
<button type="button" class="btn waves-effect waves-light grey">Secondary Button</button>
<button type="button" class="btn waves-effect waves-light cyan">Info Button</button>
<button type="button" class="btn waves-effect waves-light orange">Warning Button</button>
<button type="button" class="btn waves-effect waves-light red">Danger Button</button>
<button type="button" class="btn waves-effect waves-light green">Success Button</button>
Bootstrap multi color buttons without box shadow effect
<button type="button" class="btn waves-effect waves-light blue" style="box-shadow: none;">Primary Button</button>
<button type="button" class="btn waves-effect waves-light grey" style="box-shadow: none;">Secondary Button</button>
<button type="button" class="btn waves-effect waves-light cyan" style="box-shadow: none;">Info Button</button>
<button type="button" class="btn waves-effect waves-light orange" style="box-shadow: none;">Warning Button</button>
<button type="button" class="btn waves-effect waves-light red" style="box-shadow: none;">Danger Button</button>
<button type="button" class="btn waves-effect waves-light green" style="box-shadow: none;">Success Button</button>
Bootstrap multi color buttons with rounded shape
<button type="button" class="btn waves-effect waves-light blue" style="box-shadow: none;border-radius: 30px 30px;">Primary Button</button>
<button type="button" class="btn waves-effect waves-light grey" style="box-shadow: none;border-radius: 30px 30px;">Secondary Button</button>
<button type="button" class="btn waves-effect waves-light cyan" style="box-shadow: none;border-radius: 30px 30px;">Info Button</button>
<button type="button" class="btn waves-effect waves-light orange" style="box-shadow: none;border-radius: 30px 30px;">Warning Button</button>
<button type="button" class="btn waves-effect waves-light red" style="box-shadow: none;border-radius: 30px 30px;">Danger Button</button>
<button type="button" class="btn waves-effect waves-light green" style="box-shadow: none;border-radius: 30px 30px;">Success Button</button>
Floating / Circler buttons
Live Demo
<a class="btn-floating waves-effect waves-light blue">
	<i class="material-icons">add</i>
</a>
<a class="btn-floating waves-effect waves-light green">
	<i class="material-icons">add</i>
</a>
<a class="btn-floating waves-effect waves-light cyan">
	<i class="material-icons">add</i>
</a>
<a class="btn-floating waves-effect waves-light orange">
	<i class="material-icons">add</i>
</a>
<a class="btn-floating waves-effect waves-light red">
	<i class="material-icons">add</i>
</a>
<a class="btn-floating waves-effect waves-light green">
	<i class="material-icons">add</i>
</a>
Flat buttons

We use flat buttons in some models or cards.

<button type="button" class="btn-flat waves-effect waves-teal">flat button</button>
Disabled buttons

If a button has to be disabled on action or default, then we use the disabled class.

<button class="btn-large disabled">Button</button>
<button class="btn disabled">Button</button>
<button class="btn-flat disabled">Button</button>
<button class="btn-floating disabled"><i class="material-icons">add</i></button>
Small and Large button class
<button type="button" class="btn btn-small">Small Button</button>
<button type="button" class="btn btn-large">Large Button</button>
Deepak Tailor Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry for the last 5 years. For professional and customize web development, you can send inquiry on our email.
----
You can contact him at support@fulstackdev.com