Buttons

A call to action for the user.

Buttons v3.39.0

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

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.

Importance Button Type Notes
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 Variable Description Default
$button-font-size Button font size $font-size-small
$button-radius Button border radius $global-radius
$button-depth On hover, depth to move up 4px
$button-text-transform Button text transform uppercase
$button-uppercase If button is upper case true
$button-padding Padding for primary, secondary, alert, and control buttons 1em $spacing*2
$button-font-color Button font color $primary-color
$button-font-color-hover Button font color for hover lighten($primary-color, 20%)
$hero-button-color Hero button font and border color $white
$hero-button-opacity Hero button hover opacity 0.65
$primary-button-color Primary button background color $primary-color
$primary-button-font-color Primary button font color $white
$primary-button-icon-color Primary button icon color tint($primary-color, 50%)
$secondary-button-color Secondary button background color $light-gray
$secondary-button-font-color Secondary button font color $darkest-gray
$secondary-button-hover-font-color Secondary button hover font color $darkest-gray
$secondary-button-active-font-color Secondary button active font color $white
$secondary-button-icon-color Secondary button icon color $medium-gray
$alert-button-color Alert button background color $alert-color
$alert-button-font-color Alert button font color $white
$alert-button-icon-color Alert button icon color tint($alert-button-color, 50%)
$control-button-color Control button background color $white
$control-button-border-color Control button border color $light-gray
$control-button-font-color Control button font color $darkest-gray
$control-button-icon-color Control button icon color $medium-gray
$disabled-button-color Disabled button background color $lightest-gray
$disabled-button-font-color Disabled button font color $white