_demo/button-030/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Button Examples</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <link rel="stylesheet" href="../assets/css/demo.autoprefixed.css">
    <link rel="stylesheet" href="../assets/css/effeckt.autoprefixed.css">
    <link rel="stylesheet" href="../assets/css/topcoat-mobile-dark.autoprefixed.css">

    <!-- Vendor Libs -->
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/modernizr.js"></script>
  </head>
  <body>
    <div class="page-wrap no-transitions" id="page-wrap">
      <div class="effeckt effeckt-demo-buttons group">
        <header>
          <h2>Example 3: Topcoat Buttons + Effeckt.css
            <a href="buttons.html">#</a>
          </h2>
          <span class="source">
            Source:
            <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
          </span>
        </header>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-right topcoat-button">
            <span class="label">Expand Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-left topcoat-button">
            <span class="label">Expand Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-up topcoat-button">
            <span class="label">Expand Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button expand-down topcoat-button">
            <span class="label">Expand Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-left topcoat-button">
            <span class="label">Slide Left</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-right topcoat-button">
            <span class="label">Slide Right</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-up topcoat-button">
            <span class="label">Slide Up</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button slide-down topcoat-button">
            <span class="label">Slide Down</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-out topcoat-button">
            <span class="label">Zoom Out</span>
            <span class="spinner"></span>
          </button>
        </div>
        <div class="button-demo-wrap">
          <button class="effeckt-button zoom-in topcoat-button">
            <span class="label">Zoom in</span>
            <span class="spinner"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- Demo -->
    <script src="../assets/js/demo.js"></script>

    <!-- Libs -->
    <script src="../assets/js/modals.js"></script>
    <script src="../assets/js/buttons.js"></script>
    <script src="../assets/js/list-items.js"></script>
    <script src="../assets/js/off-screen-nav.js"></script>
    <script src="../assets/js/page-transitions.js"></script>
    <script src="../assets/js/list-scroll.js"></script>
    <script>
      stroll.bind('.effeckt-demo-list-scroll ul');
    </script>
  </body>
</html>