material-design-lite/src/button/demo.html

<div class="demo-preview-block demo-button">
  <div class="mdl-tabs components-demo mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar">
      <a class="mdl-tabs__tab overflow-vis is-active" href="#raised-button">
        <div class="component">
          <button class="mdl-button mdl-js-button mdl-button--raised">
            Button
          </button>
        </div>
        <i class="material-icons">content_copy</i> Raised Button
      </a>
      <a class="mdl-tabs__tab overflow-vis" href="#plain-fab">
        <div class="component">
          <button class="mdl-button mdl-js-button mdl-button--fab">
            <i class="material-icons">add</i>
          </button>
        </div>
        <i class="material-icons">content_copy</i> Plain FAB
      </a>
      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab">
        <div class="component">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
            <i class="material-icons">add</i>
          </button>
        </div>
        <i class="material-icons">content_copy</i> Colored FAB
      </a>
      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab-ripple">
        <div class="component">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
            <i class="material-icons">add</i>
          </button>
        </div>
        <i class="material-icons">content_copy</i> FAB w/ Ripple
      </a>
      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab-disabled">
        <div class="component">
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--disabled" disabled>
            <i class="material-icons">add</i>
          </button>
        </div>
        <i class="material-icons">content_copy</i> Disabled
      </a>
    </div>
    <div class="mdl-tabs__panel is-active" id="raised-button">
      <pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--raised"&gt;
  Button
&lt;/button&gt;</code></pre>
    </div>
    <div class="mdl-tabs__panel" id="plain-fab">
      <pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab"&gt;
  &lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;</code></pre>
    </div>
    <div class="mdl-tabs__panel" id="colored-fab">
      <pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"&gt;
  &lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;</code></pre>
    </div>
    <div class="mdl-tabs__panel" id="colored-fab-ripple">
      <pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"&gt;
  &lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;</code></pre>
    </div>
    <div class="mdl-tabs__panel" id="colored-fab-disabled">
      <pre class="demo-code"><code class="language-markup">&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled&gt;
  &lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;</code></pre>
    </div>
  </div>
</div>