<h4>Normal</h4>
<div class="b-button-group" role="group" aria-label="Normal button group">
<button type="button" class="b-button b-button--one">one</button>
<button type="button" class="b-button b-button--two">two</button>
<button type="button" class="b-button b-button--three">three</button>
</div>
<h4>Disabled</h4>
<div class="b-button-group" role="group" aria-label="Disabled button group">
<button type="button" class="b-button b-button--disabled b-button--one">one</button>
<button type="button" class="b-button b-button--disabled b-button--two">two</button>
<button type="button" class="b-button b-button--disabled b-button--three">three</button>
</div>
<h4>Small</h4>
<div class="b-button-group" role="group" aria-label="Small button group">
<button type="button" class="b-button b-button--small b-button--one">one</button>
<button type="button" class="b-button b-button--small b-button--two">two</button>
<button type="button" class="b-button b-button--small b-button--three">three</button>
</div>
<h4>Large</h4>
<div class="b-button-group" role="group" aria-label="Large button group">
<button type="button" class="b-button b-button--large b-button--one">one</button>
<button type="button" class="b-button b-button--large b-button--two">two</button>
<button type="button" class="b-button b-button--large b-button--three">three</button>
</div>
<h4>Normal</h4>
<div class="b-button-group" role="group" aria-label="Normal button group">
<button type="button" class="b-button b-button--one">one</button>
<button type="button" class="b-button b-button--two">two</button>
<button type="button" class="b-button b-button--three">three</button>
</div>
<h4>Disabled</h4>
<div class="b-button-group" role="group" aria-label="Disabled button group">
<button type="button" class="b-button b-button--disabled b-button--one">one</button>
<button type="button" class="b-button b-button--disabled b-button--two">two</button>
<button type="button" class="b-button b-button--disabled b-button--three">three</button>
</div>
<h4>Small</h4>
<div class="b-button-group" role="group" aria-label="Small button group">
<button type="button" class="b-button b-button--small b-button--one">one</button>
<button type="button" class="b-button b-button--small b-button--two">two</button>
<button type="button" class="b-button b-button--small b-button--three">three</button>
</div>
<h4>Large</h4>
<div class="b-button-group" role="group" aria-label="Large button group">
<button type="button" class="b-button b-button--large b-button--one">one</button>
<button type="button" class="b-button b-button--large b-button--two">two</button>
<button type="button" class="b-button b-button--large b-button--three">three</button>
</div>
/* No context defined for this component. */
The buttons are now completely controlled by SCSS variables, this allows for quick creation of a button library. The vars are held in the main _vars.scss sheet.
The hover/focused state animations are based on border, font & background colour css transition. For more in depth button animations, further specific work will need to be made.
Here are the variables:
$button-common--border-width: 1px;
$button-common--border-color: $col1;
$button-common--border-style: solid;
$button-common--font-family: $headings;
$button-common--font-weight: $normal;
$button-common--font-size: 16px;
$button-common--font-color: $col1;
$button-common--font-letter-spacing: 0px;
$button-common--font-line-height: 1.1;
$button-common--font-text-transform: uppercase;
$button-common--padding-top-bottom: 10px;
$button-common--padding-right-left: 20px;
$button-common--misc-background: transparent;
$button-common--misc-border-radius: $radius;
$button-common--misc-smaller-percent: 80;
$button-common--misc-larger-percent: 120;
$button-common--misc-icon-margin: 5px;
$button-common--misc-box-shadow: none;
$button-common--misc-transition: all 250ms ease-in-out;
$button-common--small-font-size: ($button-common--font-size * ($button-common--misc-smaller-percent / 100));
$button-common--small-padding-top-bottom: ($button-common--padding-top-bottom * ($button-common--misc-smaller-percent / 100));
$button-common--small-padding-right-left: ($button-common--padding-right-left * ($button-common--misc-smaller-percent / 100));
$button-common--small-letter-spacing: ($button-common--font-letter-spacing * ($button-common--misc-smaller-percent / 100));
$button-common--large-font-size: ($button-common--font-size * ($button-common--misc-larger-percent / 100));
$button-common--large-padding-top-bottom: ($button-common--padding-top-bottom * ($button-common--misc-larger-percent / 100));
$button-common--large-padding-right-left: ($button-common--padding-right-left * ($button-common--misc-larger-percent / 100));
$button-common--large-letter-spacing: ($button-common--font-letter-spacing * ($button-common--misc-larger-percent / 100));
$button-specific: (
'one': (
'border': (
'color': $col1,
'colorHover': $col1
),
'font': (
'color': $col1,
'colorHover': $col-base
),
'background': (
'color': transparent,
'colorHover': $col1
),
'focus': (
'boxShadow': 0 0 0 px-to-rem(4px) $blue-colour
)
),
'two': (
'border': (
'color': $col2,
'colorHover': $col2
),
'font': (
'color': $col2,
'colorHover': $col-base
),
'background': (
'color': transparent,
'colorHover': $col2
),
'focus': (
'boxShadow': 0 0 0 px-to-rem(4px) $blue-colour
)
),
'three': (
'border': (
'color': $col3,
'colorHover': $col3
),
'font': (
'color': $col3,
'colorHover': $col-base
),
'background': (
'color': transparent,
'colorHover': $col3
),
'focus': (
'boxShadow': 0 0 0 px-to-rem(4px) $blue-colour
)
)
);