Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<p>Normal</p>
<a class="btn btn--primary">Button</a>
<a class="btn btn--primary btn--outline">Button</a>
<a class="btn btn--secondary">Button</a>
<a class="btn btn--secondary btn--outline">Button</a>
<a class="btn btn--tertiary">Button</a>
<a class="btn btn--tertiary btn--outline">Button</a>
<p>Large</p>
<a class="btn btn--primary btn--large">Button</a>
<a class="btn btn--primary btn--outline btn--large">Button</a>
<a class="btn btn--secondary btn--large">Button</a>
<a class="btn btn--secondary btn--outline btn--large">Button</a>
<a class="btn btn--tertiary btn--large">Button</a>
<a class="btn btn--tertiary btn--outline btn--large">Button</a>
<p>Block</p>
<a class="btn btn--primary btn--block">Button</a>
<a class="btn btn--secondary btn--block">Button</a>
<a class="btn btn--tertiary btn--block">Button</a>
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Button background styles (name, colour)
$btn-backgrounds: (
'primary': DarkSlateBlue,
'secondary': DeepSkyBlue,
'tertiary': MediumVioletRed
) !default;
// Base button styles
%btn-base {
display: inline-block;
vertical-align: middle;
font: inherit;
text-align: center;
margin: 0;
border: none;
cursor: pointer;
overflow: visible;
&,
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
// Button
.btn {
@extend %btn-base;
// Additional btn styles
border: 2px solid;
transition: all 250ms;
padding: 1rem;
// Each colour
@each $key, $value in $btn-backgrounds {
&--#{$key} {
background: $value;
border-color: $value;
&:hover,
&:active {
background: lighten($value, 10%);
border-color: lighten($value, 10%);
}
// Button outline hover state
&.btn--outline {
&:hover,
&:active {
background: $value;
border-color: $value;
}
}
}
}
// Outline style
&--outline {
background: none;
}
// Block style
&--block {
display: block;
width: 100%;
}
// Large
&--large {
font-size: 2rem;
padding: 2rem;
}
// Adjust color if on dark background
&--on-light {
color: black;
}
// Adjust color if on light background
&--on-dark {
color: white;
}
}
.btn {
display: inline-block;
vertical-align: middle;
font: inherit;
text-align: center;
margin: 0;
border: none;
cursor: pointer;
overflow: visible;
}
.btn, .btn:hover, .btn:active, .btn:focus {
text-decoration: none;
}
.btn {
border: 2px solid;
transition: all 250ms;
padding: 1rem;
}
.btn--primary {
background: DarkSlateBlue;
border-color: DarkSlateBlue;
}
.btn--primary:hover, .btn--primary:active {
background: #5a4dae;
border-color: #5a4dae;
}
.btn--primary.btn--outline:hover, .btn--primary.btn--outline:active {
background: DarkSlateBlue;
border-color: DarkSlateBlue;
}
.btn--secondary {
background: DeepSkyBlue;
border-color: DeepSkyBlue;
}
.btn--secondary:hover, .btn--secondary:active {
background: #33ccff;
border-color: #33ccff;
}
.btn--secondary.btn--outline:hover, .btn--secondary.btn--outline:active {
background: DeepSkyBlue;
border-color: DeepSkyBlue;
}
.btn--tertiary {
background: MediumVioletRed;
border-color: MediumVioletRed;
}
.btn--tertiary:hover, .btn--tertiary:active {
background: #e827a0;
border-color: #e827a0;
}
.btn--tertiary.btn--outline:hover, .btn--tertiary.btn--outline:active {
background: MediumVioletRed;
border-color: MediumVioletRed;
}
.btn--outline {
background: none;
}
.btn--block {
display: block;
width: 100%;
}
.btn--large {
font-size: 2rem;
padding: 2rem;
}
.btn--on-light {
color: black;
}
.btn--on-dark {
color: white;
}
<p>Normal</p>
<a class="btn btn--primary">Button</a>
<a class="btn btn--primary btn--outline">Button</a>
<a class="btn btn--secondary">Button</a>
<a class="btn btn--secondary btn--outline">Button</a>
<a class="btn btn--tertiary">Button</a>
<a class="btn btn--tertiary btn--outline">Button</a>
<p>Large</p>
<a class="btn btn--primary btn--large">Button</a>
<a class="btn btn--primary btn--outline btn--large">Button</a>
<a class="btn btn--secondary btn--large">Button</a>
<a class="btn btn--secondary btn--outline btn--large">Button</a>
<a class="btn btn--tertiary btn--large">Button</a>
<a class="btn btn--tertiary btn--outline btn--large">Button</a>
<p>Block</p>
<a class="btn btn--primary btn--block">Button</a>
<a class="btn btn--secondary btn--block">Button</a>
<a class="btn btn--tertiary btn--block">Button</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.