Buttons - academies-trust/less-framework GitHub Wiki

There are 3 types of button included in the framework. In order of importance, they are:

1. Floating Action Button (FAB)
2. Raised Button
3. Flat Button

There should only ever be 1 FAB on the page. For guidance on usage of these buttons, please see this document: http://www.google.co.uk/design/spec/components/buttons.html#buttons-usage

Buttons require at least 2 elements: a button, and a button wrapper. An example of this is:

<div class="btn-wrapper btn-raised">
    <div class="btn">Click me</div>
</div>

Any anchors or click-events should always be applied to the button wrapper, whilst any animations should be applied to the button itself. This is so that the click-area for the button is always slightly larger than the button. This is advantageous for touch-devices, in order to improve usability.

Buttons can have several states:

• .btn-neutral - white background with accent colour text
• .btn-primary - primary background with light colour text
• .btn-accent - accent background with light colour text
• .btn-positive - green background with light colour text
• .btn-negative - red background with light colour text
• .btn-disabled - light grey background with grey text

• .btn-neutral - accent colour text
• .btn-primary - primary colour text
• .btn-positive - green colour text
• .btn-negative - red colour text
• .btn-disabled - light grey text

Raised buttons have a drop-shadow. When the button is pressed, the drop-shadow will increase in size and softness whilst the button will scale upwards. This is to simulate a feeling of interactivity when using buttons on a touch-device, which otherwise can feel quite separated.