Button Variables

When you set up your buttons in Design > Buttons, we generate a set of SCSS variables for each different button type that you can use in your styles.

We give you access to four variables per button type and they are:

Variables

Primary Button

$btnPrimaryTextColor
$btnPrimaryBgColor
$btnPrimaryOutlined
$btnPrimarySize

Secondary Button

$btnSecondaryTextColor
$btnSecondaryBgColor
$btnSecondaryOutlined
$btnSecondarySize

Inverse Button

$btnInverseTextColor
$btnInverseBgColor
$btnInverseOutlined
$btnInverseSize

Call To Action Button

$btnCallToActionTextColor
$btnCallToActionBgColor
$btnCallToActionOutlined
$btnCallToActionSize

📘

Colourful Language

Tip for the top: it can be helpful to come up with a quick guide for when to use certain color. Assigning colours to actions like Donate or Sign up, or even to loose emotions like Community or Success can help you figure out what your buttons should look like, or what colours across the sections of your site.

With a guide like this, you can ensure visual continuity for you and your users and help teach them what's expected of them.

🚧

Stay Visible

When setting up your buttons, double-triple-check the contrast ratio of the text and background colours to make sure that everyone can see it 👀 We've added in some helpful hints to let you know when your not quite hitting the mark so if you don't see a warning, you're all good to go 🤙

Examples

Make heading same size as an adjacent button

.button--primary + h4 {
  font-size: $btnPrimarySize;
}