buttons
Version:
How many ways are there to build a button with Assemble? Many.
1,283 lines (1,278 loc) • 160 kB
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 8: 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>
<!-- button.expand-right -->
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-right topcoat-button">
<span class="label">Expand Right</span>
<span class="spinner"></span>
</button>
</div>
<hr>
<!-- button.expand-left -->
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-left topcoat-button">
<span class="label">Expand Left</span>
<span class="spinner"></span>
</button>
</div>
<hr>
<!-- button.expand-up -->
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-up topcoat-button">
<span class="label">Expand Up</span>
<span class="spinner"></span>
</button>
</div>
<hr>
<!-- button.expand-down -->
<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 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 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 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 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 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 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 expand-down topcoat-button">
<span class="label">Expand Down</span>
<span class="spinner"></spa