Materialize CSS Buttons

Materialize CSS Buttons

There are mainly three types of Pure CSS buttons in the Materialize CSS. 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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

Try it now

Source Code : Output

Disabled Button

Disabled Button