Buttons

Mixins

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);
}

Hierarchy

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