materialize provides different css classes to apply various predefined visual and behavioral enhancements to the buttons. following table mentions the available classes and their effects.

sr.no.	class name & description
1	btn sets button or anchor as a materialize button, required. sets raised display effect to a button.
2	btn-floating creates a circular button.
3	btn-flat sets flat display effect to a button, default.
4	btn-large creates large buttons.
5	disabled creates a disabled button.
6	type="submit" represents an anchor or button as a primary button.
7	waves-effect sets ripple click effect, can be used in combination with any other classes.

example

the following example demonstrates 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>

output

verify the output.

Previous Lesson

Next Lesson