styleguide 0.30.11

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>

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>