A button is used to trigger an action.
Do not use a button to trigger navigation. In this case, use a link.
<button
type="button"
class="button {{ 'button-' ~ type }} {{ modifier }} {% if icon %}button-icon{% endif %}"
{% if disabled %}
disabled
{% endif %}
>
{{ text }}
</button>
<button type="button" class="button button-secondary ">
Button-default
</button>
{
"text": "Button-default",
"type": "secondary",
"modifier": null,
"disabled": null
}
////
///
/// This file defines the bulk of all button styling.
///
/// @group buttons
/// @author Gert-Jan Meire
///
////
///
/// Button - small variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-small {
@include small-text;
min-height: 1.9rem;
letter-spacing: .02em;
}
///
/// Button - medium variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-medium {
@include medium-text;
min-height: 2.2rem;
letter-spacing: .025em;
}
///
/// Button - large variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-large {
@include large-text;
min-height: 2.5rem;
letter-spacing: .03em;
}
///
/// Button - disabled variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
/// @require color
///
@mixin button-disabled {
[class*='cs--'] & {
border: 0;
background-color: color('dark-gray', -3);
color: color('white');
box-shadow: none;
&:hover {
background-color: color('dark-gray', -3);
color: color('white');
box-shadow: none;
cursor: not-allowed;
}
}
}
///
/// General button styling.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button {
@include button-medium; // Default.
@include bold-text;
padding: 0 2.6em;
transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
border: 2px solid;
border-radius: border-radius('radius-1');
font-family: $default-font-family;
text-align: center;
cursor: pointer;
&:disabled {
@include button-disabled;
}
&.button-small {
@include button-small;
}
&.button-medium {
@include button-medium;
}
&.button-large {
@include button-large;
}
&.button-block {
@include button-block;
}
&[class*="icon-"] {
@include button-icon;
}
}
///
/// Makes a button display block instead of inline.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-block {
display: inline-block;
width: 100%;
}
///
/// Define a button with an icon.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-icon {
display: inline-flex;
position: relative;
align-items: center;
justify-content: space-between;
padding: 0 .8em 0 1.2em;
line-height: 1.8em;
text-align: left;
// Padding fix specificly for IE11.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
padding: .3em .8em 0 1.2em;
line-height: 1.6;
}
&::before {
order: 2;
margin-left: .5rem;
// Fix for IE11 flex order property.
float: right;
font-size: 1.8em;
// Font-size specificly for IE11.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
font-size: 1.2rem;
}
}
&::after {
padding-right: .2rem;
content: '';
}
}
.button,
input[type="button"],
input[type="submit"] {
@include button;
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
}