Buttons
A set of buttons with sizes, colors, and states.
Variables
var(--button-radius-default)
: 3px - default button radius for all buttonsvar(--color-button-primary-bg)
: {{stylesheets.color.accent1}} - the default background and border color for primary buttonsvar(--color-button-primary-color)
: #fff - the default text color for primary buttonsvar(--color-button-secondary-bg)
: {{stylesheets.color.accent2}} - the background color for all secondary buttonsvar(--color-button-secondary-color)
: {{stylesheets.color.white}} - the text color for all secondary buttons
Mixins
button $backgroundColor, $fontColor, $borderColor, $borderRadius, $hoverBackground, $hoverColor;
Parameters
$backgroundColor
(required) - Color$fontColor
(required) - Color$borderColor
(required) - Color$borderRadius
(required) - CSS Unit$hoverBackground
(required) - Color$hoverColor
(required) - Color
Usage
.btn {
@mixin button blue, white, blue, 3px, white, blue;
}
Output
.btn {
display: inline-block;
border: 2px solid blue;
border-radius: 3px;
padding: 12px 14px;
background-color: blue;
color: white;
font-size: 14px;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: color 250ms var(--easing-out), background-color 250ms var(--easing-out);
&:hover,
&:active,
&.active,
&:focus {
background-color: white;
color: blue;
}
&:disabled {
opacity: .7;
cursor: not-allowed;
}
}
button-size $paddingY, $paddingX, $fontSize, $borderRadius
Parameters
$paddingY
(required) - CSS Unit; value for the y-axis, top and bottom$paddingX
(required) - CSS Unit; value for the x-axis, left and right$fontSize
(required) - CSS Unit$borderRadius
(required) - CSS Unit
Usage
.btn-lg {
@mixin button-size 20px, 25px, 16px, 5px;
}
Output
.btn-lg {
border-radius: 5px;
padding: 20px 25px;
font-size: 16px;
}
button-outline $color
Parameters
$color
(required) - Color; border and text colors
Usage
.btn-outline {
@mixin button-outline blue;
}
Output
.btn-outline {
border-color: blue;
background-color: transparent;
color: blue;
&:hover,
&:active,
&.active,
&:focus {
background-color: blue;
color: #fff;
}
}
Helpers
.button
.button-alt
.button-outline
.button-lg
.button-sm
Example
<button class="button">Primary Button</button>
<a class="button">Primary Link Button</a>
Alt
<button class="button-alt">Alt Button</button>
<a class="button-alt">Alt Link Button</a>
Outline
<button class="button-outline">Outline Button</button>
<a class="button-outline">Outline Link Button</a>
Sizes
<button class="button button-lg">Large Button</button>
<button class="button button-sm">Small Button</button>
<button class="button-outline button-lg">Large Outline Button</button>
<button class="button-outline button-sm">Small Outline Button</button>
Disabled
<button class="button" disabled>Disabled Button</button>