<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Colored FAB button -->
    <button class="mdl-button mdl-js-button mdl-button--fab">
      <i class="material-icons">add</i>
    </button>
    <!-- Colored FAB button with ripple -->
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">add</i>
    </button>
    
    <hr>
    
    <!-- Accent-colored raised button with ripple -->
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
     Accent with Ripple
    </button>
    
    <!-- Colored raised button -->
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      Button
    </button>
    
    <!-- Flat button -->
    <button class="mdl-button mdl-js-button">
  Flat Button
</button>
    
    <hr>
    
    <!-- Icon button -->
    <button class="mdl-button mdl-js-button mdl-button--icon">
      <i class="material-icons">mood</i>
    </button>
    <!-- Colored icon button -->
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
      <i class="material-icons">mood</i>
    </button>

  </body>
</html>
  body {
    padding: 40px 0 0;
    background: #fafafa;
    text-align: center;
  }

button.mdl-button {
  margin: 30px;
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.