Skip to main content

Brand buttons

This page applies to:MindTouch Responsive

LESS variables and mixins used for site wide button styles. Includes default, primary, and icon buttons.

 

Default Buttons

These buttons are the default style throughout the site. They can be found on most forms throughout the site.

Screenshot

default-button-states.png

Variables

These variables control the appearance of the button colors and font

@default-button-background-color
Default value: lighten(@highlight-color-desaturated, 36%)  
Definition: The background color used for default buttons.
DefaultButton1.png
@default-button-background-color-hover
Default value: darken(@default-button-background-color, 20%)  
Definition: The background color of a default button when a user moves their mouse over it.
DefaultButton2.png
@default-button-background-color-focus
Default value: darken(@default-button-background-color, 20%)  
Definition: The background color of a default button when a user has tabbed to it with their keyboard.
DefaultButton3.png
@default-button-background-color-active
Default value: darken(@default-button-background-color, 20%);  
Definition: The background color of a default button when a user clicks on it or hits enter when tabbed to it.
DefaultButton4.png
@default-button-border-color
Default value: darken(@default-button-background-color, 35%);  
Definition: The border color seen on default buttons.
DefaultButton5.png
@default-button-border-color-hover
Default value: @highlight-color;  
Definition: The border color seen on default buttons when a user moves their mouse over it.
DefaultButton6.png
@default-button-border-color-focus
Default value: @highlight-color;  
Definition: The border color seen on a default buttons when a user has tabbed to it with their keyboard.
DefaultButton7.png
@default-button-border-color-active
Default value: @highlight-color;  
Definition: The border color seen on a default button when a user clicks on it or hits enter when tabbed to it.
DefaultButton8.png
@default-button-color
Default value: contrast(@default-button-background-color);  
Definition: The font color of the default button.
DefaultButton9.png
@default-button-color-hover
Default value: contrast(@default-button-background-color-hover);  
Definition: The font color of the default button when a user moves their mouse over it.
DefaultButton10.png
@default-button-color-focus
Default value: contrast(@default-button-background-color-focus);  
Definition: The font color of the default button when a user has tabbed to it with their keyboard.
DefaultButton11.png
@default-button-color-active
Default value: contrast(@default-button-background-color-active);  
Definition: The font color of the default button when a user clicks on it or hits enter when tabbed to it.
DefaultButton12.png
@default-button-font-family
Default value: @default-font-family;
Definition: The font type used for the default button. Default font for MindTouch Responsive is Lato.
DefaultButton13.png
@default-button-hover-glow
Default value: fade(@default-button-border-color-hover, 50%);  
Definition: The colored glow that surrounds the default button when a user hovers or focuses on it.
DefaultButton14.png
@default-button-inner-shadow
Default value: : inset .2em .1em .5em rgba(0,0,0,.3);  
Definition: The inner shadow that appears inside the default button when a user clicks or has tabbed to it with their keyboard.
DefaultButton15.png

Mixins

These mixins allow you to simulate the button style on elements that aren't buttons but need to look like them.

This is the default button style users see when a page loads.

.mt-button-style-default {
    background: @default-button-background-color;
    border: 1px solid @default-button-border-color;
    border-radius: @border-radius-default;
    box-sizing: border-box;
    color: @default-button-color;
    cursor: pointer;
    display: inline-block;
    font-family: @default-font-family;
    font-size: 100%;
    font-weight: normal;
    line-height: 2;
    margin: 0;
    outline: 0;
    padding: 0 .8em;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
}

This is the style used when a user moves their mouse over the button.

.mt-button-style-default-hover {
    background: @default-button-background-color-hover;
    border: 1px solid @default-button-border-color-hover;
    box-shadow: 0 0 .3em @default-button-hover-glow;
    color: @default-button-color-hover;
    outline: 0;
}

This is the focus style used when a user has tabbed to the button with their keyboard.

.mt-button-style-default-focus {
    background: @default-button-background-color-focus;
    border: 1px solid @default-button-border-color-focus;
    box-shadow: 0 0 .5em @default-button-hover-glow;
    color: @default-button-color-focus;
    outline: 0;
}

This is the active style used when the user has clicked or pressed enter after tabbing to the button.

.mt-button-style-default-active {
    background: @default-button-background-color-active;
    border-color: @default-button-border-color-active;
    box-shadow: @default-button-inner-shadow;
    color: @default-button-color-active;
    outline: 0;
}

When used in the rule set of an element that isn't a normal button element, copy the following nested rule set and replace the .my-fake-button selector for the one you need to use. The & is represents the primary selector and the .no-touch selector is used to distinguish between touch screen and non-touch screen devices.

.my-fake-button {
    .mt-button-style-default;
    .no-touch &:hover {
        .mt-button-style-default-hover;
    }
    &:active {
        .mt-button-style-default-active;
    }
    &:focus {
        .mt-button-style-default-focus;
    }
}

Primary Buttons

Primary buttons are used in situations where there are two or more buttons next to each other and the primary call to action needs to be identified. They are also used on Revision History pages and Article Feedback forms so they stand out from their colored parent container.

Screenshot

primary-button-states.png

Variables

@primary-button-background-color
Default value: lighten(@highlight-color-desaturated, 36%)  
Definition: The background color used for primary buttons.
PrimaryButton1.png
@primary-button-background-color-hover
Default value: darken(@default-button-background-color, 20%)  
Definition: The background color of a primary button when a user moves their mouse over it.
PrimaryButton2.png
@primary-button-background-color-focus
Default value: darken(@default-button-background-color, 20%)  
Definition: The background color of a primary button when a user has tabbed to it with their keyboard.
PrimaryButton3.png
@primary-button-background-color-active
Default value: darken(@default-button-background-color, 20%);  
Definition: The background color of a primary button when a user clicks on it or hits enter when tabbed to it.
PrimaryButton4.png
@primary-button-border-color
Default value: darken(@default-button-background-color, 35%);  
Definition: The border color seen on primary buttons.
PrimaryButton5.png
@primary-button-border-color-hover
Default value: @highlight-color;  
Definition: The border color seen on primary button when a user moves their mouse over it.
PrimaryButton6.png
@primary-button-border-color-focus
Default value: @highlight-color;  
Definition: The border color seen on a primary button when a user has tabbed to it with their keyboard.
PrimaryButton7.png
@primary-button-border-color-active
Default value: @highlight-color;  
Definition: The border color seen on a primary button when a user clicks on it or hits enter when tabbed to it.
PrimaryButton8.png
@primary-button-color
Default value: contrast(@default-button-background-color);  
Definition: The font color of the primary button.
PrimaryButton9.png
@primary-button-color-hover
Default value: contrast(@default-button-background-color-hover);  
Definition: The font color of the primary button when a user moves their mouse over it.
PrimaryButton10.png
@primary-button-color-focus
Default value: contrast(@default-button-background-color-focus);  
Definition: The font color of the primary button when a user has tabbed to it with their keyboard.
PrimaryButton11.png
@primary-button-color-active
Default value: contrast(@default-button-background-color-active);  
Definition: The font color of the primary button when a user clicks on it or hits enter when tabbed to it.
PrimaryButton12.png
@primary-button-font-family
Default value: @default-font-family;
Definition: The font type used for the primary button. Default font for MindTouch Responsive is Lato.
PrimaryButton13.png
@primary-button-hover-glow
Default value: fade(@default-button-border-color-hover, 50%);  
Definition: The colored glow that surrounds the primary button when a user hovers or focuses on it.
PrimaryButton14.png
@primary-button-inner-shadow
Default value: : inset .2em .1em .5em rgba(0,0,0,.3);  
Definition: The inner shadow that appears inside the primary button when a user clicks or has tabbed to it with their keyboard.
PrimaryButton15.png

Mixins

These mixins allow you to simulate the primary button style on elements that aren't buttons but need to look like them.

This is the primary button style users see when a page loads.

.mt-button-style-primary {
    background: @primary-button-background-color;
    border: 1px solid @primary-button-border-color;
    border-radius: @border-radius-default;
    box-sizing: border-box;
    color: @primary-button-color;
    cursor: pointer;
    display: inline-block;
    font-family: @primary-font-family;
    font-size: 100%;
    font-weight: normal;
    line-height: 2;
    margin: 0;
    outline: 0;
    padding: 0 .8em;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
}

This is the style used when a user moves their mouse over the button.

.mt-button-style-primary-hover {
    background: @primary-button-background-color-hover;
    border: 1px solid @primary-button-border-color-hover;
    box-shadow: 0 0 .3em @primary-button-hover-glow;
    color: @primary-button-color-hover;
    outline: 0;
}

This is the focus style used when a user has tabbed to the button with their keyboard.

.mt-button-style-primary-focus {
    background: @primary-button-background-color-focus;
    border: 1px solid @primary-button-border-color-focus;
    box-shadow: 0 0 .5em @primary-button-hover-glow;
    color: @primary-button-color-focus;
    outline: 0;
}

This is the active style used when the user has clicked or pressed enter after tabbing to the button.

.mt-button-style-primary-active {
    background: @primary-button-background-color-active;
    border-color: @primary-button-border-color-active;
    box-shadow: @primary-button-inner-shadow;
    color: @primary-button-color-active;
    outline: 0;
}

When used in the rule set of an element that isn't a normal button element, copy the following nested rule set and replace the .my-fake-button selector for the one you need to use. The & is represents the primary selector and the .no-touch selector is used to distinguish between touch screen and non-touch screen devices.

.my-fake-button {
    .mt-button-style-primary;
    .no-touch &:hover {
        .mt-button-style-primary-hover;
    }
    &:active {
        .mt-button-style-primary-active;
    }
    &:focus {
        .mt-button-style-primary-focus;
    }
}

Icon Buttons

If the element initiates an action, then it is built with a button, but not all buttons in MindTouch look like buttons. Some buttons have only an icon or an icon and text. These are called icon buttons and have their own unique variable and mixins. Some of the more common icon buttons are the hierarchy collapse/expand button found in the header (folder icon), the table of contents collapse/expand button, and the Article Feedback buttons.

Screenshots

hierarchy-button.png     toc-button.png     article-feedback-button.png

Variables

This variable is used to control the appearance of an icon buttons active state dotted outline which is used for accessibility reasons. The default color of icon buttons is determined by the @primary-link-color variable.

@icon-button-outline-color-active
Default value: @highlight-color  
Definition: The color used for the dotted outline that appears around an icon button when it's in its active state.
IconButton1.png

Mixins

These mixins allow you to use the icon button styles on any element you choose.

.mt-button-style-icon {
    background: none;
    border: 0;
    box-shadow: none;
    color: @primary-link-color;
    line-height: 1;
    padding: 0;
}
.mt-button-style-icon-active {
    color: @primary-link-color-active;
    outline: @icon-button-outline-color-active dotted 1px;
    padding: 0;
}