Materialize buttons | how to use button class
Deepak Tailor - Jan 18 2021
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
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in