Layers Framework: Buttons

Layers Framework

Last Updated: Time to Read: Less than a minute

To create a Layers Button, add the button class to any <a>  or <button>  element.
Layers Button

Combined Style

Primary buttons are used in widgets or CTA elements and will appear larger than a default button. They use the btn-primary  class on a <button>   element.
Large Button

Combined Style

 

Like the primary button, the btn-secondary class is applied to <button>  elements exclusively, and used mainly in the admin screens:
Secondary Link

 Combined Style

Subtle Buttons use the btn-subtle class to provide light buttons and are used with an <a>  or <button>  element.
A Subtle Button

Combined Style

Button Colors

Button styles can be applied to any a button or input type element.

Regular Primary Secondary Subtle Link

Button Sizes

To increase or decrease a button size append .btn-small .btn-large or .btn-massive to the class string.

Massive Large Regular Small

Buttons with Badges

Badges are used as a way to show extra information in a call to action. For example a price or 'Free!'

12 Button 12 Primary 12 Secondary 12 Subtle 12 Link

Button Groups with Badges

You can group buttons with badges as well.

Badges

Below are badge styles relating to their buttons.

Badge Badge Primary Badge Secondary Badge Subtle Badge Blank

Labels

Use labels to highlight something in a sentence or title.

Label Primary Label Secondary Label Subtle Label Error Label Blank Label No Frill