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:
Variable | Format |
---|---|
$btn[Type]TextColor | hexcode |
$btn[Type]BgColor | hexcode |
$btn[Type]Outlined | true/false |
$btn[Type]Size | px/rem/em |
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;
}
Updated almost 4 years ago
You can do a lot with our buttons mixins: