---
title: "Exemplo i18n: botões Topcoat + Effeckt.css + i18n"
language: pt
---
<div class="effeckt effeckt-demo-buttons group">

  {{!-- demo metadata --}}
  <header>
    <h2>{{title}}
      <a href="buttons.html">#</a>
    </h2>
    <span class="source">
      {{#i18n "source"}}{{/i18n}}
      <a href="http://lab.hakim.se/effeckt/">Hakim El Hattab</a>
    </span>
  </header>

  {{!-- buttons --}}
  <div class="button-demo-wrap">
    <button class="effeckt-button expand-right topcoat-button">
      <span class="label">{{#i18n "expand_right"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button expand-left topcoat-button">
      <span class="label">{{#i18n "expand_left"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button expand-up topcoat-button">
      <span class="label">{{#i18n "expand_up"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button expand-down topcoat-button">
      <span class="label">{{#i18n "expand_down"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-left topcoat-button">
      <span class="label">{{#i18n "slide_left"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-right topcoat-button">
      <span class="label">{{#i18n "slide_right"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-up topcoat-button">
      <span class="label">{{#i18n "slide_up"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-down topcoat-button">
      <span class="label">{{#i18n "slide_down"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button zoom-out topcoat-button">
      <span class="label">{{#i18n "zoom_out"}}{{/i18n}}t</span>
      <span class="spinner"></span>
    </button>
  </div>
  <div class="button-demo-wrap">
    <button class="effeckt-button zoom-in topcoat-button">
      <span class="label">{{#i18n "zoom_in"}}{{/i18n}}</span>
      <span class="spinner"></span>
    </button>
  </div>
</div>