m.button

Primarily used with links or form button elements where an action is invoked when the element is clicked.

There are several configuration options for spacing and sizes at the top of this partial. The colour configurations are located in the main colour file.

Block

.btn

Sets initial colour, padding and typographic styles.

Modifiers

    • .btn--inverse

    • Disabled

    Inverse the primary button colours.

    • .btn--secondary

    • Enabled

    Secondary button, uses the colours set in the colours partial.

    • .btn--ghost

    • Enabled

    Transparent button with a border matching the primary button colour. On hover, this fills with the primary button hover colour.

    • .btn--ghost-white

    • Enabled

    Transparent button with a white border and white text. On hover, the button fills with white and the text changes to match the primary button colour.

    This is sometimes used over the top of images to ensure adequate contrast.

    • .btn--large

    • Disabled

    A larger version of the standard button. This can be applied in conjunction with any of the colour modifiers above.

    • .btn--small

    • Disabled

    A smaller version of the standard button. This can be applied in conjunction with any of the colour modifiers above.

    • .btn--transparent

    • Enabled

    Transparent buttons, these are not generally used within the content, but are reserved for things like icons.

    • .btn--fill

    • Enabled

    Causes the button to fill the width of the container on mobile screens. As soon as the screen reaches the palm-h viewport, it changes back to it’s initial width.