Source: Styles.scss, line 94
Source: _2-molecules/_buttons.scss, line 1
6.1 Single buttons
A button can consist of a <button> or an <a> element.
Please note the button should be uses with arrow icon only (see "Button w/ icon").
Please note the role property when using an anchor element.
Source: _2-molecules/_buttons.scss, line 63
6.1.1 Primary button
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-primary {{modifier_class}}">Buttontext</button>
<a class="btn btn-primary {{modifier_class}}" href="#" role="button" title="">Buttontext</a>Source: _2-molecules/_buttons.scss, line 134
6.1.2 Button w/ icon
The icon is positioned absolute. Any icon can be attached via modifier class name.
Please note the icon's aria property.
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
.icon-btn-left
Icon left
<button class="btn btn-primary icon-btn {{modifier_class}}">
<span class="btntxt">Buttontext</span>
<span class="icon" aria-hidden="true"></span>
</button>
<a class="btn btn-primary icon-btn {{modifier_class}}" href="#" role="button" title="">
<span class="btntxt">Buttontext</span>
<span class="icon" aria-hidden="true"></span>
</a>Source: _2-molecules/_buttons.scss, line 176
6.1.3 Secondary button
Please note this button style is DEPRECATED!
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-secondary {{modifier_class}}">Buttontext</button>
<a class="btn btn-secondary {{modifier_class}}" href="#" role="button" title="">Buttontext</a>Source: _2-molecules/_buttons.scss, line 189
6.1.4 Clean button
Please note this button style is DEPRECATED!
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-clean {{modifier_class}}">Buttontext</button>
<a class="btn btn-clean {{modifier_class}}" href="#" role="button" title="">Buttontext</a>Source: _2-molecules/_buttons.scss, line 236
6.1.5 Deviant (Ghost) button w/ icon
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
.icon-btn-left
Icon left
<button class="btn icon-btn deviant {{modifier_class}}">
<span class="btntxt">Buttontext</span>
<span class="icon" aria-hidden="true"></span>
</button>
<a class="btn icon-btn deviant {{modifier_class}}" href="#" role="button" title="">
<span class="btntxt">Buttontext</span>
<span class="icon" aria-hidden="true"></span>
</a>Source: _2-molecules/_buttons.scss, line 334
6.1.6 Facebook button
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-facebook icon-btn icon-btn-left icon-facebook {{modifier_class}}">
<span class="icon" aria-hidden="true"></span>
<span class="btntxt">Auf Facebook teilen</span>
</button>
<a class="btn btn-facebook icon-btn icon-btn-left icon-facebook {{modifier_class}}" href="#" role="button" title="">
<span class="icon" aria-hidden="true"></span>
<span class="btntxt">Auf Facebook teilen</span>
</a>Source: _2-molecules/_buttons.scss, line 374
6.1.7 Twitter button
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-twitter icon-btn icon-btn-left icon-twitter {{modifier_class}}">
<span class="icon" aria-hidden="true"></span>
<span class="btntxt">Twitter</span>
</button>
<a class="btn btn-twitter icon-btn icon-btn-left icon-twitter {{modifier_class}}" href="#" role="button" title="">
<span class="icon" aria-hidden="true"></span>
<span class="btntxt">Twitter</span>
</a>Source: _2-molecules/_buttons.scss, line 415
6.1.8 Button w/ icon, w/o text
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
:disabled
Disabled state
<button class="btn btn-primary icon-btn no-txt {{modifier_class}}">
<span class="icon" aria-hidden="true"></span>
<span class="btntxt">Buttontext</span>
</button>
<a class="btn btn-primary icon-btn no-txt {{modifier_class}}" href="#" role="button" title="">
<span class="btntxt">Buttontext</span>
<span class="icon" aria-hidden="true"></span>
</a>Source: _1-atoms/_link-to-top.scss, line 1
6.1.9 To-Top button
A button to scroll back to the top of the website.
Examples
Default styling
:hover
Hovered / focused state
:active
Active state
<a class="link-to-top btn btn-primary icon-btn large no-txt icon-angle-up {{modifier_class}}"
title="back to top"
href="#top">
<span class="icon" aria-hidden="true"></span>
</a>