Buttons

• Defaults
• Buttons modifiers

Defaults

Buttons applied on various HTML tags

<button class="my-btn">button</button>
<button class="my-btn" disabled="">button</button>
<a href="#" class="my-btn">button</a>
<span class="my-btn">button</span>

<!-- DEMO ONLY -->
<style>
    body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR4AWP4//+/FD585swZvHh4GDBqACEFBCwYHgaMGgAA3mTKn52zzk8AAAAASUVORK5CYII=); padding: 30px; }
    .my-btn { margin: 0px 30px 30px 0px; }
</style>

Buttons modifiers

All the modifiers for buttons

<button class="my-btn mod-tab-translucid-grey">tab-translucid-grey</button>
<button class="my-btn mod-tab-translucid-grey active">tab-translucid-grey active</button>
<button class="my-btn mod-neutral">neutral</button>
<button class="my-btn mod-neutral-max">neutral max</button>
<button class="my-btn mod-neutral-dark">neutral dark</button>
<button class="my-btn mod-translucid">translucid</button>
<button class="my-btn mod-translucid-alt">translucid alt</button>
<button class="my-btn mod-translucid-dark">translucid dark</button>
<button class="my-btn mod-translucid-light">translucid light</button>
<button class="my-btn mod-translucid-max">translucid max</button>
<button class="my-btn mod-transparent-light">transparent light</button>
<button class="my-btn mod-transparent-dark">transparent dark</button>
<button class="my-btn mod-transparent-primary">transparent primary</button>
<button class="my-btn mod-plain-1">plain 1</button>
<button class="my-btn mod-xxs">xxs</button>
<button class="my-btn mod-xs">xs</button>
<button class="my-btn mod-sm">sm</button>
<button class="my-btn mod-md">md</button>
<button class="my-btn mod-xl">xl</button>
<button class="my-btn mod-wide">wide</button>
<button class="my-btn mod-narrow">narrow</button>
<button class="my-btn mod-squared">squared</button>
<button class="my-btn mod-squared mod-neutral-max">squared neutral-max</button>
<button class="my-btn mod-tab">tab</button>
<button class="my-btn mod-tab-light">tab light</button>
<button class="my-btn mod-tab-neutralized">tab neutralized</button>
<button class="my-btn mod-sticker-xxs"></button>
<button class="my-btn mod-sticker">sticker</button>
<button class="my-btn mod-sticker-lg">sticker lg</button>
<button class="my-btn mod-sticker-1em">1em</button>
<button class="my-btn mod-block">button block</button>
<button class="my-btn mod-block">block with another tag <span class="icon-arrow-right"></span></button>
<button class="my-btn mod-block-spaced">button block spaced</button>
<button class="my-btn mod-block-spaced">block spaced with another tag <span class="icon-arrow-right"></span></button>
<button class="my-btn mod-block-left">block left</button>
<button class="my-btn mod-block-left">block left <span class="icon-arrow-right"></span></button>
<button class="my-btn mod-block-right">block right</button>
<button class="my-btn mod-column">column <span class="icon-arrow-down"></span></button>


<!-- DEMO ONLY -->
<style>
    body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR4AWP4//+/FD585swZvHh4GDBqACEFBCwYHgaMGgAA3mTKn52zzk8AAAAASUVORK5CYII=); padding: 30px; }
    .my-btn { margin: 0px 30px 30px 0px; }
</style>