Materialize CSS Buttons

There are mainly three types of pure Materialize CSS buttons. 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>
    
Try it now

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>
        
Try it now

Source Code: Output

Materialize CSS Button

Raised Button

Floating 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>
    
Try it now

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>
        
Try it now

Source Code: Output

Materialize CSS Floating Button

add

Flat Button

To create 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>
    
Try it now

Source Code

          <div class="container center-align">
  <a class="waves-effect waves-teal btn-flat">Flat Button</a>
</div>
        
Try it now

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>
    
Try it now

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>
        
Try it now

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.

General Syntax

      <a class="waves-effect waves-light btn-large">Button</a>
    
Try it now

Source Code

          <div class="container">
  <a class="waves-effect waves-light btn-large">Button</a>
</div>
        
Try it now

Source Code: Output

Small Button

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

General Syntax

      <a class="waves-effect waves-light btn-small">Button</a>
    
Try it now

Source Code

          <div class="container">
  <h4>Small Button</h4>
  <a class="waves-effect waves-light btn-small">Small Button</a>
</div>
        
Try it now

Source Code: Output

Small Button

Small Button

Disabled Button

To create disabled button, add .disabled class to the to <button> or <a> element base class.

General Syntax

      <a class="btn-large disabled">Button</a>
    
Try it now

Source Code

          <div class="container">
  <h4>Disabled Button</h4>
  <a class="btn-large disabled">Disabled Button</a>
</div>
        
Try it now

Source Code: Output

Disabled Button

Disabled Button

Web Tutorials

Materialize CSS Buttons
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4