Materialize CSS Buttons
There are mainly three types of pure Materialize CSS buttons. The followings are the Materialize CSS buttons:
- Raised Button
- Floating Button
- 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>
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
Materialize CSS Button
Raised ButtonFloating Buttton
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
Materialize CSS Floating Button
addFlat Button
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
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 </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
Materialize CSS Button Size
Large Button
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
Small Button
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
Small Button
Small ButtonDisabled Button
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
Disabled Button
Disabled ButtonWeb Tutorials
