Styleguide 0.30.7

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.3 - Style

<a class="button radius">Button</a>
<a class="button round">Button</a>

7.4 - Expanded

<a class="button expand">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.7 - Buttons with lables

<a href="#" class="button">Button <span class="label round">2</span></a>

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.

<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>