Using the Button mixin

The hardest button to button. Not any more! Make consistent buttons, no matter what element you chose.

Slate has you covered for consistent buttons that work consitently Accross element types. If you need a link that looks like a button, or a submit button or a button element, they will all look the same with consistent sizing.

The easiest way to use buttons is to use the mixin on a class. That way, you can apply to any element you wish to look like a button.

Slate contains a mixin for making flat buttons. More will be added for other types of buttons, but for now this gives you a good base to build on:

.button {
    @include button;
}

This results in the following set of buttons, using inputs, links, and button elements. The colors and states can all be controlled in the config:

<input type="submit" value="Input" class="button">
<input type="submit" value="Disabled Input" class="button" disabled>
<button class="button">Button</button>
<a href="#" class="button">Anchor</a>
Anchor

Customising Color & Scale

The _config-buttons file contains a number of variables to change the look of buttons on a global basis. That's fine if thats what you want, but what if you need a spefic button to be a different size or color?

Slates buttons use a color map in the config to allow you to quickly setup button styles. To make your own button, you can simply clone this color map, rename it and then set that as a parameter on the button mixin:

$button-custom: (
  use-borders: true,
  default: $primary,
  hover: darken($primary, 15%),
  focus: darken($primary, 20%),
  active: darken($primary, 10%),
  disabled: $disabled,
  font-family: inherit,
  textlight: $bright,
  textdark: $dark,
  textweight: $bold,
  font-size: 24px,
  textalign: center,
  border-left: 2px solid $gray,
  border-right: 2px solid $gray,
  border-top: 2px solid $gray,
  border-bottom: 2px solid $gray,
  border-hover-left: 2px solid $dark,
  border-hover-right: 2px solid $dark,
  border-hover-top: 2px solid $dark,
  border-hover-bottom: 2px solid $dark,
  border-focus-left: 2px solid $dark,
  border-focus-right: 2px solid $dark,
  border-focus-top: 2px solid $dark,
  border-focus-bottom: 2px solid $dark,
  border-disabled-left: 2px solid darken($disabled, 20%),
  border-disabled-right: 2px solid darken($disabled, 20%),
  border-disabled-top: 2px solid darken($disabled, 20%),
  border-disabled-bottom: 2px solid darken($disabled, 20%),
  height: 48px,
  margin: 0 0 27px,
  padding: 0 9px,
  rounded: 0,
  display: inline-block,
  boxsizing: content-box
);

Then apply it to your button:

.my-button {
    @include button($button-custom);
}

The reason there is a dark and light setting for the text is that the button has a trick up its sleeve. If it detects that you have used background colour that is is sufficiently dark or light enough for the text to be unreadable, it will automatically switch the text colour accordingly. Your welcome.

Gradient Buttons

You can also do buttons that have a gradient background. These are set in similar fashion with a sass map controlling the buttons style:

$button-gradient: (
    mode: 'ttb',
    start-pos: 0%,
    end-pos: 100%,
    textlight: $bright,
    textdark: $dark,
    textweight: $button-input-weight,
    font-size: $button-input-font-size,
    height: $button-input-height,
    start-color: $gradient-start,
    end-color: $gradient-end,
    // Hover Colors
    start-color-hover: $gradient-start,
    end-color-hover: darken($gradient-end, 10%),
    // Focus Colors
    start-color-focus: $gradient-start,
    end-color-focus: darken($gradient-end, 10%),
    // Active Colors
    start-color-active: $gradient-start,
    end-color-active: darken($gradient-end, 10%)
);

This pretty much speaks for itself, except perhaps the mode: 'ttb' setting. This controls the type of gradient used. 'ttb' with give you a gradient that runs from top to bottom. 'ltr' will run from left to right. Finally, setting the mode to mode: 'rad' will give the button a radial gradient.

You can then apply this to a button class in a similar way, as below.

.my-gradient-button {
    @include button-gradient($button-gradient);
}

Using the default colors, this is what a top to bottom gradient button looks like:

DIY Buttons

The config variables should cover most of what you would want to do with a button. In the rare it cases where it does not, you can still do it by setting the variable up as close to your design as possible, then adding any neccessary tweaks after it. It might go something like this:

.custom--diy--button {
    @include button($custom-diy-button);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    text-transform: uppercase;
    margin: {
        left: auto;
        right: auto;
    }
    width: 100%;
    max-width: 150px;
}

The corresponding config variable is set like this:

$custom-diy-button: (

  use-borders: false,

  default: #666,
  hover: darken($primary, 15%),
  focus: darken($primary, 20%),
  active: darken($primary, 10%),
  disabled: $disabled,

  font-family: inherit,
  textlight: $bright,
  textdark: $dark,
  textweight: $bold,
  font-size: $global-base-font-size,
  textalign: center,

  border-left: 2px solid $gray,
  border-right: 2px solid $gray,
  border-top: 2px solid $gray,
  border-bottom: 2px solid $gray,

  border-hover-left: 2px solid $dark,
  border-hover-right: 2px solid $dark,
  border-hover-top: 2px solid $dark,
  border-hover-bottom: 2px solid $dark,

  border-focus-left: 2px solid $dark,
  border-focus-right: 2px solid $dark,
  border-focus-top: 2px solid $dark,
  border-focus-bottom: 2px solid $dark,

  border-disabled-left: 2px solid darken($disabled, 20%),
  border-disabled-right: 2px solid darken($disabled, 20%),
  border-disabled-top: 2px solid darken($disabled, 20%),
  border-disabled-bottom: 2px solid darken($disabled, 20%),

  height: 60px,
  margin: 0px 0 27px 0px,
  padding: 0 9px,
  rounded: 0px,

  display: block,
  boxsizing: content-box

);

This produces this button:

Icon Modifiers

Now comes some fancy pants stuff. You can easily add icons to your buttons with several additional modifier classes. There are four sets built in Math Symbols, Solid Arrows, Dashed Arrows and Chevrons.

These sets are class driven and can be toggled on and off in _config-buttons.scss. It is advisable to turn off the ones you are not using to save on file size.

<div class="block-1">
<div class="block-col">
    <a href="#" class="custom--button--negative icon-plus-right">Add</a>
    <a href="#" class="custom--button--negative icon-multiply-right">Close</a>
    <a href="#" class="custom--button--negative icon-singlechevron-left">Back</a>
    <a href="#" class="custom--button--negative icon-doublechevron-right">Continue</a>
    <a href="#" class="custom--button--negative icon-uparrow-right">Up</a>
    <a href="#" class="custom--button--negative icon-downarrowdashed-left">Down</a>
</div>
</div>

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.