7 - Buttons
Click me! Buttons are mainly used for primary actions in a context or on a page.
:hover
:hover-state
:focus
:focus-state
.active
disabled-state
.disabled
disabled-state
<a class="button {$modifiers}">a.button</a>
7.1 - Colors
.primary
$primary-color
.orange
$color-orange
.yellow
$color-yellow
.green
$color-green
.blue
$color-blue
.purple
$color-purple
.burgundy
$color-burgundy
.pink
$color-pink
.teal
$color-teal
.black
$color-dark
.success
$success-color
.alert
$color-red
.warning
$color-orange
.light
white
.white
white
.ui
$ui-color
<a class="button {$modifiers}">Button</a> <a class="button outline {$modifiers}">Button</a>
7.2 - Size
<a class="button tiny">Button</a> <a class="button small">Button</a> <a class="button">Button</a> <a class="button large">Button</a>
7.5 - Button groups
.radius
Radius
.round
Round
.even-3
Expanded
<ul class="button-group {$modifiers}"> <li><a href="#" class="button">Button one</a></li> <li><a href="#" class="button">Button two</a></li> <li><a href="#" class="button">Button three</a></li> </ul>
7.6 - Icons
Icons can be aligned both to the right and left.
<a class="button"><span class="icon-Attachment align-left"></span>Button</a> <a class="button">Button<span class="icon-Attachment align-right"></span></a>
7.6.1 - Icon only
In some cases the button might consist of only a icon. E.g. when creating a toolbar.
<ul class="button-group radius"> <li><a href="#" class="tiny button icon"><span class="icon-Edit"></span></a></li> <li><a href="#" class="tiny button icon active"><span class="icon-Link"></span></a></li> <li><a href="#" class="tiny button icon"><span class="icon-Bulleted-list"></span></a></li> <li><a href="#" class="tiny button icon"><span class="icon-Contrast"></span></a></li> <li><a href="#" class="tiny button icon"><span class="icon-Picture"></span></a></li> <li><a href="#" class="tiny button icon"><span class="icon-Attachment"></span></a></li> </ul>
7.8 - Dropdown
Requires javascript
See Foundation docs
<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a> <ul id="drop1" data-dropdown-content class="f-dropdown"> <li><a href="#">This is a link</a></li> <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li> </ul>
7.10 - Special buttons
<a class="button tip primary">Tips oss <span class="tel">2400</span></a> <a class="button tip dark">Tips oss <span class="tel">2400</span></a> <ul class="button-group"> <li><a href="#" class="tiny button twitter icon"><span class="icon-Twitter"></span>Twitter</a></li> <li><a href="#" class="tiny button facebook icon"><span class="icon-Facebook"></span>Facebook</a></li> <li><a href="#" class="tiny button google icon"><span class="icon-Google"></span>Google+</a></li> </ul>
7.11 - Dagbladet Pluss buttons
Referrer button inside Dabladet Pluss articles. Red for default DB Pluss articles, and grey for Magasinet articles.
Du leser nå Dagbladet Pluss Du leser nå Dagbladet Pluss
<a class="tiny button radius pluss">Du leser nå Dagbladet Pluss</a> <article class="magasinet"> <a class="tiny button radius pluss">Du leser nå Dagbladet Pluss</a> </article>
7.12 - CTA buttons fixed
<div class="fixedcta"> <a class="button primary fixedcta">Har du spørsmål innenfor kirurgi? Spør tom <span><svg width="16px" height="6px" viewBox="0 0 16 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch --> <title>icon / arrow</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"> <g id="CTA-/-les-mer" transform="translate(-62.000000, -11.000000)" stroke="#07A7FF"> <g id="Group-2"> <g id="icon-/-arrow" transform="translate(63.000000, 11.000000)"> <g id="Group"> <path d="M0,3 L13,3" id="Line"></path> <path d="M11,0 L13.8284271,2.82842712" id="Line"></path> <path d="M11.1715729,3 L14,5.82842712" id="Line" transform="translate(12.585786, 4.414214) scale(-1, 1) translate(-12.585786, -4.414214) "></path> </g> </g> </g> </g> </g> </svg></span></a> <a><img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/jam.png" alt="John Arne Markussen"></a> </div>