Materialize CSS Simple Raised Button Customization

Introduction:

Buttons are one of the most widely used elements in any of the HTML Framework. No wonder it is going to be different in Materialize CSS Framework. There are several types of buttons that are present in Materialize CSS Framework which includes Simple Button, Simple Raised Button, Flat Buttons, Floating Button, Fab Buttons, Disabled Buttons and much more. This tutorial will brief about customizing simple raised button and changing its style according to the need. 

Simple Button

In Materialize CSS it is easy to create a button. By simply adding “btn” class in <a> will produce a simple raised button with teal color. Teal is the default color which Materialize CSS Framework produces when no color is specified. 

<a href="#" class="btn">Test</a>

Changing Color in Simple Button

It is easy to change the color of buttons in Materialize CSS Framework. By simply adding the color name as prescribed in the Materialize CSS Framework Color Palette with the class will produce preferred colors. 

Link for Color Palette:

http://materializecss.com/color.html

Now in order to change the default Teal color of the button to Dark, Red, we can add the class red darken-4 class inside the Class. This will produce Simple Raised button with Dark Red color. 

<a href="#" class="btn red darken-4">Test</a>

 

We can either darken the main color by adding darken class next to the prime color. Materialize CSS give 4 variations for darken as well as for lighten and accent shades. You can play around and produce several color variation according to the need. 

We can also apply a new color which is not present in the Materialize CSS using CSS properties. For example, if I wish to add orange color with hex code: #FF6347, the following method will help in adding custom color to the button.

<a href="#" class="btn" style="background-color: #FF6347">Test</a>

In the above Orange Button, if you wish to change the text color to Black, the coding is as follows:

<a href="#" class="btn" style="background-color: #FF6347; color:black">Test</a>

Changing Button Size

There is a default option in Materialize CSS Framework to increase the size of the button. By simply adding btn-large class next to btn class will increase the size of the button.

<a href="#" class="btn btn-large">Test</a> 

Disabled Button

Materialize CSS provides an easy option to add button disable property to a button. Simply by adding disabled class next to the btn class will create Disabled Button. 

<a href="#" class="btn disabled">Test</a>

Waves Effect

Waves is an external library which produces ink ripple effect in button components. Materialize CSS provides waves effect to buttons. Waves effect can be added to any button by simply adding the class waves-effect next to the btn class. This produces ink ripple effect when a button is clicked. Furthermore, waves has several option which can be implemented in buttons. Let’s discuss everything in detail.

Simple Waves Effect

Waves-effect creates a ink wave effect in a button. The color of the waves will be similar to that of the button color. 

<a href="#" class="btn waves-effect">Test</a>

Waves Light

Waves-light class, when applied along with the Waves-effect, will produce ink waves in white color. These effects can be utilized in various scenarios where white tint is required. 

Waves Color

In Materialize CSS, there are several predefined waves color which can be utilized in button. Materialize CSS offers various Wave Colors such as White, Red, Yellow, Orange, Purple, Green, and Teal. These predefined waves color can be directly called by adding respective classes such as waves-red, waves-green, etc.

<a href="#" class="btn waves-effect waves-red">Test</a>

Color of the waves can be customized by creating new classes, for example if you require brown waves effect you can use the following CSS

.waves-effect.waves-brown .waves-ripple {‘
 background-color: rgba(121, 85, 72, 0.65);
}
<a href="#" class="btn white black-text waves-effect waves-brown">Test</a>


Button with Icons

Materialize CSS provides an easy way to integrate icons into Buttons. In order to add icons to buttons, we need to add Google Material Icons CDN to the Website. After adding CDN, it easy to call the icon in a button. We can change the icon as per our requirement by cross referencing with Google Material Icon list. The following coding will explain how icons are added to the button.

<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

Download Source

Demo