Button

Overview

The button module provides general purpose styling for CTA buttons.

Table of Contents

Fundamentals

The button Mixin

The button module is implemented using the button mixin, which takes two arguments: $primaryColor and $secondaryColor. The mixin controls how these colors are used to impact the button styling across its various states (default, hover, disabled, etc). Any major extensions to the button module (e.g. new modifiers) should be made within the mixin itself.

Permitted Tags

The basic button module and its variants can be used with the following tags (except where noted otherwise):

  • <a>
  • <button>
  • <input[type="button"]> *
  • <input[type="submit"]> *
  • <input[type="reset"]> *

In order maintain semantic HTML, it isn't recommended to apply the button styling module to other types of tags, e.g. divs.

*NOTE: <input> elements are self-closing tags, and thus will not support button variations that require interior elements and/or pseudo-elements (e.g. the sliding and icon buttons).

The buttons Container

The buttons module is a responsive container class used to responsively position buttons next to one another, and to space these buttons away from neighboring elements. Nearly all instances of the button class should be wrapped in a buttons container (even singular buttons!). Only omit the buttons container if highly custom positioning is required, in which case a custom container class should be created.

Examples

Basic Buttons

The button border and background use $primaryColor while the button text uses $secondaryColor. The background and text colors are reversed on hover.

Link

Outline

The outline button has a transparent background that hovers to $primaryColor.

Block

The block button will take up 100% width of its parent container.

Disabled

By default, disabled buttons will display at 50% opacity.

Sliding Buttons

On hover, the new background color comes sliding into place.

Icon

Simply wrap the button text in a span and include an SVG icon. Note that the icon sizing, spacing, and coloring are all easily configurable. An SVG is strongly recommended, as they are much easier to style dynamically.