Materialize CSS Buttons

by Online Tutorials Library July 14, 2022

Materialize CSS Buttons

Materialize CSS provides different CSS classes to apply various predefined visual and behavioral enhancements to the buttons. Let’s see those various classes and their effects.

Index	Class name	Description
1)	btn	It is used to set button or anchor as a materialize button, required. It also sets raised display effect to a button.
2)	btn-floating	It is used to create a circular button.
3)	btn-flat	It is used to set flat display effect to a button, default.
4)	btn-large	It is used to create large buttons.
5)	disabled	It is used to create a disabled button.
6)	type = “submit”	It is used to represent an anchor or button as a primary button.
7)	waves-effect	It is used to set ripple click effect, can be used in combination with any other classes.

Example

Let’s take an example to demonstrate the use of mdl-button classes to show different types of buttons.

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Buttons Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>         <div class = “card-panel”>           <h5>Raised Buttons</h5>           <button class = “btn waves-effect waves-teal”>Add</button></td>           <button class = “btn waves-effect waves-teal”>              <i class = “material-icons left”>add</i>Add</button></td>           <button class = “btn waves-effect waves-teal”>              <i class = “material-icons right”>add</i>Add</button></td>           <button class = “btn waves-effect waves-teal disabled”>Add</button></td>        </div>                <div class = “card-panel”>           <h5>Flat Buttons</h5>           <button class = “btn-flat waves-effect waves-teal”>Add</button></td>           <button class = “btn-flat waves-effect waves-teal disabled” >              <i class = “material-icons left”>add</i>Add</button></td>        </div>                <div class = “card-panel”>           <h5>Floating Buttons</h5>           <a class = “btn-floating waves-effect waves-light red”>              <i class = “material-icons”>add</i></a>           <a class = “btn-floating waves-effect waves-light red disabled” >              <i class = “material-icons”>add</i></a>        </div>                <div class = “card-panel”>           <h5>Primary Buttons</h5>           <button class = “btn waves-effect waves-light red” type = “submit”>Send              <i class = “material-icons right”>send</i></button>           <button class = “btn waves-effect waves-light red disabled” type = “submit” >Cancel              <i class = “material-icons right”>cancel</i></button>        </div>                <div class = “card-panel”>           <h5>Large Buttons</h5>           <a class = “btn-floating btn-large waves-effect waves-light red”>              <i class = “material-icons”>add</i></a>           <a class = “btn-floating btn-large waves-effect waves-light red disabled”>              <i class = “material-icons”>add</i></a>        </div>     </body>     </html>  

Test it Now

Output:

Materialize Buttons 1
Materialize Buttons 2

Next TopicMaterialize CSS Breadcrumb

Materialize CSS Buttons

Materialize CSS Buttons

Example

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like