buttons
Version:
How many ways are there to build a button with Assemble? Many.
105 lines (101 loc) • 4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple 18n: Boutons 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>Exemple 18n: Boutons Topcoat + Effeckt.css + i18n
<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">Agrandir vers la Droite</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-left topcoat-button">
<span class="label">Agrandir vers la Gauche</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-up topcoat-button">
<span class="label">Agrandir vers le Haut</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button expand-down topcoat-button">
<span class="label">Agrandir vers le Bas</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-left topcoat-button">
<span class="label">Glisser vers la Gauche</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-right topcoat-button">
<span class="label">Glisser vers la Droite</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-up topcoat-button">
<span class="label">Glisser vers le Haut</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button slide-down topcoat-button">
<span class="label">Glisser vers le Bas</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button zoom-out topcoat-button">
<span class="label">Zoom Avantt</span>
<span class="spinner"></span>
</button>
</div>
<div class="button-demo-wrap">
<button class="effeckt-button zoom-in topcoat-button">
<span class="label">Zoom Arrière</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>