Buttons

A call to action for the user.

Buttons v3.39.0

Button styles can be used for both <button> and <a> tags.

Button

Primary Button

Secondary Button

Alternate Button style

Hero Button

Login

Alert Button

Alert

Button Set

Button Multi Set (Flexbox)

Disabled button

Continue

Control button

Continue

Icon button

Button group

Social Buttons

Mixins v3.41.0

Use the following mixins to create custom buttons without overriding the customization variables.

Button

The style-button mixin lets you create a custom button with any background color. Set $enabled to false to disable hover feedback.

.my-custom-button {
    @include style-button($background-color:magenta, $enabled:true);
}

Button Hover Style

Define button-hover-style-override before importing opattern to override the button hover style. This is most useful if you want change the background and shadow color of the button on hover. To change the depth of the button, you should define the $button-depth variable.

@mixin button-hover-style-override($background-color, $button-depth) {
    // make background darker instead of lighter
    background-color: shade($background-color, 10%);
    // make the shadow lighter instead of darker
    box-shadow: 0 $button-depth 0 0 tint($background-color, 10%);
}

// import opattern

Hero Button

The style-hero-button mixin lets you create a hero button with any text/border color and opacity.

.my-custom-hero-button {
    @include style-hero-button($button-color:magenta, $button-hover-opacity:0.1);
}

Content Strategy

  • Start with a verb and keep it short (2-5 words max).
  • Preview the action. Include keywords that give a sense of where you’re going.
  • Be clear, not cute. Buttons are about getting people to take an action, so be straightforward.
  • In general, avoid pronouns like me, my, I. We usually write to “you,” so it can be confusing to switch. Exception: If the user is agreeing or confirming something (I agree, I already do this).
  • Don’t use exclamation marks!!!

VIEW & PAY

COMPLETE HOME PROFILE

SIGN UP FOR ALERTS

GET STARTED

TELL ME ABOUT MY ENERGY USE

FIND MY TOP 5

GET THE DEETS

LET’S GO!

Hierarchy

Different button styles communicate different levels of importance. Use the hierarchy chart below to determine which button to use.

ImportanceButton TypeNotes
Highest
Use within the hero section.
An important call to action.
A secondary choice. Should pair with a primary call to action.
A secondary choice that can be standalone.
Lowest
Use when action changes the current view instead of taking users to a new page.

Customization v3.39.0

Sass VariableDescriptionDefault
$button-font-sizeButton font size$font-size-small
$button-radiusButton border radius$global-radius
$button-depthOn hover, depth to move up4px
$button-text-transformButton text transformuppercase
$button-uppercaseIf button is upper casetrue
$button-paddingPadding for primary, secondary, alert, and control buttons1em $spacing*2
$button-font-colorButton font color$primary-color
$button-font-color-hoverButton font color for hoverlighten($primary-color, 20%)
$hero-button-colorHero button font and border color$white
$hero-button-opacityHero button hover opacity0.65
$primary-button-colorPrimary button background color$primary-color
$primary-button-font-colorPrimary button font color$white
$primary-button-icon-colorPrimary button icon colortint($primary-color, 50%)
$secondary-button-colorSecondary button background color$light-gray
$secondary-button-font-colorSecondary button font color$darkest-gray
$secondary-button-hover-font-colorSecondary button hover font color$darkest-gray
$secondary-button-active-font-colorSecondary button active font color$white
$secondary-button-icon-colorSecondary button icon color$medium-gray
$alert-button-colorAlert button background color$alert-color
$alert-button-font-colorAlert button font color$white
$alert-button-icon-colorAlert button icon colortint($alert-button-color, 50%)
$control-button-colorControl button background color$white
$control-button-border-colorControl button border color$light-gray
$control-button-font-colorControl button font color$darkest-gray
$control-button-icon-colorControl button icon color$medium-gray
$disabled-button-colorDisabled button background color$lightest-gray
$disabled-button-font-colorDisabled button font color$white