<!-- Default -->
<a href="#" class="btn" href="http://example.com">Link Default</a>
<button class="btn">Button Default</button>
<!-- Small -->
<a href="#" class="btn btn--small" href="http://example.com">Link Small</a>
<button class="btn btn--small">Button Small</button>
<!-- Large -->
<a href="#" class="btn btn--large" href="http://example.com">Link Large</a>
<button class="btn btn--large">Button Large</button>
<!-- Danger -->
<a href="#" class="btn btn--danger" href="http://example.com">Link Danger!</a>
<button class="btn btn--danger">Button Danger!</button>
<!-- Outline -->
<a href="#" class="btn btn--outline" href="http://example.com">Link Outline</a>
<button class="btn btn--outline">Button Outline</button>
<!-- Forward -->
<a href="#" class="btn btn--forward" href="http://example.com">Link Forward</a>
<button class="btn btn--forward">Button Forward</button>
<!-- Back -->
<a href="#" class="btn btn--back" href="http://example.com">Link Back</a>
<button class="btn btn--back">Button Back</button>
<!-- Add -->
<a href="#" class="btn btn--add" href="http://example.com">Link Add</a>
<button class="btn btn--add">Button Add</button>
<!-- Delete -->
<a href="#" class="btn btn--delete" href="http://example.com">Link Delete</a>
<button class="btn btn--delete">Button Delete</button>
<!-- Download -->
<a href="#" class="btn btn--download" href="http://example.com">Link Download</a>
<button class="btn btn--download">Button Download</button>
<!-- Disabled -->
<a href="#" disabled class="btn btn--disabled" href="http://example.com">Link Disabled</a>
<button disabled class="btn btn--disabled">Button Disabled</button>
<a href="#"
{{#if disabled}}disabled{{/if}}
class="btn{{#if modifier }} btn--{{ modifier }}{{/if}}"
href="{{ href }}">Link {{ text }}</a>
<button
{{#if disabled}}disabled{{/if}}
class="btn{{#if modifier }} btn--{{ modifier }}{{/if}}">Button {{ text }}</button>
/* Default */
{
"href": "http://example.com",
"text": "Default"
}
/* Small */
{
"href": "http://example.com",
"text": "Small",
"modifier": "small"
}
/* Large */
{
"href": "http://example.com",
"text": "Large",
"modifier": "large"
}
/* Danger */
{
"href": "http://example.com",
"text": "Danger!",
"modifier": "danger"
}
/* Outline */
{
"href": "http://example.com",
"text": "Outline",
"modifier": "outline"
}
/* Forward */
{
"href": "http://example.com",
"text": "Forward",
"modifier": "forward"
}
/* Back */
{
"href": "http://example.com",
"text": "Back",
"modifier": "back"
}
/* Add */
{
"href": "http://example.com",
"text": "Add",
"modifier": "add"
}
/* Delete */
{
"href": "http://example.com",
"text": "Delete",
"modifier": "delete"
}
/* Download */
{
"href": "http://example.com",
"text": "Download",
"modifier": "download"
}
/* Disabled */
{
"href": "http://example.com",
"text": "Disabled",
"modifier": "disabled",
"disabled": true
}
button,
.btn {
display: inline-block;
vertical-align: middle;
border: solid 1px transparent;
border-radius: .3em;
cursor: pointer;
font-family: $font-stack-sans;
text-decoration: none;
text-shadow: none;
color: #fff;
color: rgba(255,255,255,.95);
background: $color-btn;
// background-image: linear-gradient($color-btn-highlight, $color-btn);
appearance: none;
transition: all 100ms ease-in-out;
padding: .3em 1em;
margin: 0 .1em .5rem;
font-size: .875em;
line-height: $line-height;
&:focus {
outline: 0;
box-shadow: 0 0 2px 2px $color-link;
}
&:active {
transform: translateY(1px);
outline: 0;
}
&:hover {
background: $color-btn-highlight;
// background-image: linear-gradient($color-btn-highlight, $color-btn-highlight);
border: solid 1px $color-btn-highlight;
}
&:visited,
&:active,
&:hover {
color: #fff;
}
}
button[disabled],
.btn[disabled] {
color: #ccc !important;
background: #eee !important;
cursor: default !important;
border: solid 1px #ccc !important;
pointer-events: none !important;
}
.btn--small {
font-size: 80%;
padding: .15em .9em;
}
.btn--large {
font-size: 110%;
padding: .4em 1.4em;
}
.btn--outline,
.btn--outline:link,
.btn--outline:visited,
.btn--outline:hover,
.btn--outline:focus,
.btn--outline:active {
color: $color-btn;
border: solid 1px $color-btn;
background: transparent;
&:visited,
&:hover,
&:focus,
&:active {
color: $color-btn;
}
&:hover {
color: #fff;
background: $color-btn;
}
}
.btn--danger,
.btn--danger:link,
.btn--danger:visited,
.btn--danger:hover,
.btn--danger:focus,
.btn--danger:active {
color: #fff;
background: $color-error;
border: solid 1px transparent;
&:link,
&:hover,
&:visited,
&:active,
&:focus {
color: #fff;
border: solid 1px transparent;
}
&:hover {
background: saturate(lighten($color-error, 0%), 15%);
border: solid 1px transparent;
}
}
.btn:after,
.btn:before {
display: inline-block;
color: inherit;
font-weight: normal;
transition: all 200ms ease-in-out;
}
.btn--forward:after {
content: '\25b8';
margin-left: .3em;
}
.btn--forward:hover:after {
transform: translateX(.1em);
}
.btn--back:before {
content: '\25b8';
margin-right: .3em;
transform: rotateY(180deg);
}
.btn--back:hover:before {
transform: rotateY(180deg) translateX(.1em);
}
.btn--add {
padding-left: .7em;
&:before {
content: '+';
font-size: 1.2em;
font-weight: bold;
margin-right: .3em;
}
}
.btn--delete {
padding-left: .7em;
&:before {
content: '\00d7';
font-size: 1.2em;
font-weight: bold;
margin-right: .3em;
}
}
.btn--download {
padding-left: .7em;
&:before {
content: '\2b07 ';
font-size: 90%;
margin-right: .5em;
}
}
.btn--download:hover:before {
transform: translateY(.1em);
}
Gives the visual appearance of a button. Favor the semantically correct <button> element, but you may also use .btn and its variants on <a> and <input> elements.