Materialize Buttons

Materialize Buttons

Materialize CSS provides different types of Materialize buttons that are used to perform several actions such as click, etc. These buttons are:

  • Raised Button
  • Floating Buttton
  • Flat Button
  • Submit Button

Raised Button

Materialize CSS raised button can be created by assigning the .btn class to the <button> or <a> element base class.

General Syntax

<a href="#" class="btn">Button</a>
<button class="btn">Button</button>    
Try It Now

Source Code

Download
<div class="row">
  <div class="col s12 m6 center-align custom-space--small">
    <a href="#" class="btn">Raised Button </a>
  </div>
  <div class="col s12 m6  center-align">
    <button class="btn">Raised Button</button>
  </div>
</div>    
Try it yourself

Source Code : Output

Floating Buttton

Floating button can be created easily, by placing the .btn-floating class to the <button> or <a> element's base class

General Syntax

<a class="btn-floating"><i class="material-icons">add</i></a>    
Try It Now

Source Code

Download
<a class="btn-floating btn-large waves-effect waves-light orange">
   <i class="material-icons">add</i>
</a>    
Try it yourself

Source Code : Output

Flat Button

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

General Syntax

<a class="btn-flat">Button</a>    
Try It Now

Source Code

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

Source Code : Output

Submit Button

To create submit button, add the .btn class to the <button> element base class and specify button type="submit".

General Syntax

<button class="btn" type="submit" name="action">Submit 
        <i class="material-icons right">send</i>
 </button>    
Try It Now

Source Code

Download
<div class="container">
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit 
    <i class="material-icons right">send</i>
  </button>
</div>    
Try it yourself

Source Code : Output

Disabled Button

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

General Syntax

<a class="disabled">Button</a>
<button class="disabled">Button</button>    
Try It Now

Source Code

Download
<div class="container center-align">
   <a href="#" class="btn disabled">Disabled Raised Button</a>
</div>    
Try it yourself

Source Code : Output

Button Size

Materialized provides mainly two types of button sizes such as small and large button size.

Large Button

Large button can be created by assigning the .btn-large class to the <button> or <a> element base class.

General Syntax

<a class="btn-large">Button</a>    
Try It Now

Source Code

Download
<div class="container center-align">
  <a class="waves-effect waves-light btn-large">
     <i class="material-icons left">cloud</i> button
</a>
</div>    
Try it yourself

Source Code : Output

Small Button

To create small button, assign the .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

Download
<div class="container center-align">
   <a class="waves-effect waves-light btn-small">Small Button</a>
</div>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS