Materialize CSS Buttons

The Materialize CSS has specific classes of CSS for creating beautiful looking buttons. You may create normal and large sized buttons simply or with icons (material icons etc) for making the message more clear.

In this tutorial, I will show you how to create materialize buttons by utilizing various built-in classes with live demos and code.

Types of button in materialize CSS

  • Raised buttons
  • Floating Circular Action (FCA) buttons
  • Flat buttons

The example of raised buttons

The raised buttons are the standard buttons that you may use in a flat web page for performing certain actions. For creating the standard button of normal size, use the btn class in the <a> or <button> tags.

If no color class is given then standard green button is created. You may optionally use wave effects as well. See the demo online with code:

materialize button simple

See online demo and code

The buttons markup:

You can see, the first button is simply assigned the btn class. In the second button, waves-effect class is also used.

The third button is assigned a material icon towards the left of button’s text and the forth assigned icon towards the right of button’s text.

Creating raised buttons with different colors

You may use custom colors or color palette based on material design colors for creating various colored buttons.

All you have to do is to refer the base color class in the button or <a> tag along with button classes. See the example below where I created a number of buttons with different colors:

materialize button colors

See online demo and code

The markup for buttons:

You can see color palettes with base class names here.

The example of creating circle buttons

The floating circle button type in materialize framework is meant for buttons with very important functions.

For creating circle buttons, use the btn-floating class in the <a> or button tag. For adding the wave effect, you need adding the materialize.min.js along with jQuery library.

You also require adding the waves-effect class in the <a> tag along with button class.

Just like Raised buttons, the default color of the circle button is greenish. You may specify color classes as we used for raised buttons.

See the circle buttons demo for default color, wave effect, large and normal sizes and various colors.

materialize button circle

See online demo and code

The markup for circle floating buttons:

A demo of fixed action buttons

You may create a fixed action button on different places in a web page by using the fixed-action-btn class. Multiple action buttons can be attached for allowing visitors performing various actions that may open on mouse hover or click only.

Have a look at this demo and see the button towards the right bottom of the example page. As you hover over that button, the action buttons display in the horizontal direction.

materialize button FAB

See online demo and code

The markup:

Create vertical fixed action buttons

Just use the vertical class instead of horizontal class for displaying fixed action buttons in the vertical direction. Have a look at the demo online:

materialize button FAB vertical

See online demo and code

Only this piece is changed than the above demo:

<div class=”fixed-action-btn vertical”>

Creating click-only fixed action buttons

Rather than opening the action buttons on hover state, you may use the click-to-toggle class in the main div containing  fixed-action-btn class for opening the action buttons upon clicking the main floating button.

The buttons will be toggleable, so if already opened – it will close all buttons as you click it. Have a look at the demo:

materialize button FAB

See online demo and code

The markup:

Display fixed action buttons in toolbar

Rather than expanding the action buttons horizontally or vertically that are separated, you may display action buttons as a toolbar that expands the available width. For that, just use the toolbar class in the FAB <div> and you are done.

Have a look at the demo and click on the button with TT icon to see how toolbar appears.

materialize button FAB toolbar

See online demo and code

The markup for buttons toolbar:

For hiding the toolbar, simply click somewhere outside of the toolbar.

How to create form submit button?

You may style the submit buttons as well as using the materialize CSS. For that, use the <button> tag and specify the type attribute as “submit”. In the button tag, you may specify the button classes with color as per the need of your project. See the demo below:

materialize button submit

See online demo and code

The code:

Creating disabled buttons

For creating buttons that are disabled by appearance as well as not clickable, add the disabled class. All button types; raised, floating and flat can be assigned the disabled class:

materialize disabled button

See online demo and code

The code: