buttons
Version:
How many ways are there to build a button with Assemble? Many.
105 lines (101 loc) • 3.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo i18n: botões Topcoat + Effeckt.css + i18n</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>Exemplo i18n: botões Topcoat + Effeckt.css + i18n
<a href="buttons.html">#</a>
</h2>
<span class="source">
Fonte:
<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">Expandir direito</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-left topcoat-button">
<span class="label">Expandir esquerda</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-up topcoat-button">
<span class="label">Expandir para cima</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-down topcoat-button">
<span class="label">Expandir para baixo</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-left topcoat-button">
<span class="label">Deslize para a esquerda</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-right topcoat-button">
<span class="label">Deslize para a direito</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-up topcoat-button">
<span class="label">Deslize para a cima</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-down topcoat-button">
<span class="label">Deslize para a baixo</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button zoom-out topcoat-button">
<span class="label">Reduzirt</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button zoom-in topcoat-button">
<span class="label">Aumentar</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>