menu

Materialize Buttons


Materialize Buttons: Materialize Provides the inbuilt classes to create different buttons with effects. It is very simple to create buttons in Materialize framework. Here in this tutorial we are going to explain how you can create buttons in Materialize framework. You can also use our online editor to edit and
run the code online.


Materialize Buttons Example

There are following types of Buttons Available in Materialize-

  • →Raised
  • →Floating
    There are basically four types of floating buttons –
    1. Fixed Action
    2. Horizontal FAB
    3. Click Only FAB
    4. Toolbar FAB
  • →Flat
  • →Submit
  • →Large
  • →Disabled

Let us go one by one to understand the above button types.

Raised Button

You can create Raised Button simply as below –

Materialize Raised Buttons | Example:

Try it »

If you will run the above example it will produce the output something like this –

Materialize Buttons Example

Floating Button

Class btn-floating is used to create floating button in Materialize. Here is an example of floating button –

Materialize Floating Button Example:

Try it »

If you run the above example it will produce the following output –

Floating Button Materialize Example

Fixed Action Button

You can create fixed action which can contain multiple action that will appear on hover-

Materialize Floating Action Button Example:

Try it »

If you run the above example it will produce the output something like this –

Fixed Action Button Example

Horizontal Fab

Class horizontal is used to create horizontal fab button. You can create Horizontal Fab simply as below –

Materialize Horizontal Fab Button Example:

Try it »

If you run the above example it will produce the output something like this –

Materialize Horizontal Fab Button Example

Click Only Fab

If you want to open the option only on click, add the class click-to-toggle simply as below –

Materialize Click Only Fab Button Example:

Try it »

Fab To Toolbar

To create Fab toolbar add class toolbar to the fab. Here is an example of fab toolbar-

Materialize Fab Toolbar Example:

Try it »

If you run the above example it will produce the output something like this –

Materialize Fab Toolbar

Flat Button

Class btn-flat is used to create Flat button in Materialize. Here is an example of flat Button –

Materialize Flat Button Example:

Try it »

Submit Button

Materialize Submit Button Example:

Try it »

Disabled Button

Class disabled is used to create disabled button in materialize.

Materialize Disabled Button Example:

Try it »

If you run the above example it will produce output something like this –

Disabled Button Example

Advertisements