Buttons & Links
Buttons & Links define all interactive elements—primary actions, secondary actions, and navigation links.
Buttons
You can style each type of button throughout the platform in your own way. The platform currently supports white labeling of 8 different types of buttons. These types include:
Primary button
Orange button
Dark button
Gradient button
Outline button
Destructive button
White button
Gray button
Global Custom Button Font
You can set a custom font specifically for buttons, which will override global fonts
Choose from free Google Fonts or upload your own font
Button will always take on the bold variant of a font family
If uploading your own custom font:
Supported font formats include woff2, woff, eot, svg, otf, and ttf. If possible, using woff2 fonts is optimal. There are free online converters for this such as this one
Make sure to upload both a regular and a bold version of your font. The bold and the regular font may or may not be a part of the same font family depending on your preferences.
To easily find local fonts you can use Font Book on Macs and Fonts inside control panel on Windows.
For each type of button, you're able to customize:
Styling Options
Background style - plain color, gradient, or transparent
Background/gradient color
Text color
Border style (none, solid, dotted, dashed, groove, ridge, inset, outset)
Border width (in px)
Border roundness (in px)
When you define a custom background or text color, we do a WCAG color contrast check, and you're only able to save the color if contrast is higher than 3:1.
States
Normal state
Hover state is customizable separately - simply toggle the hover toggle and customize any setting
Darkmode is also customizable separately - select Yes for different style in darkmode and edit any settings while having either dark/light mode selected
Shadows
Shadow blur (in px)
X/Y offset (in px)
Spread (in px)
Hover multiplier (how shadow changes on hover) - 1 means that shadows are unchanged, and eg. 1.3 means that shadows are 30% stronger on hover.
Typography
Custom font for the specific button - this is an optional override over both the global font and the global button font.
Links
Link Styles
Normal link color
Destructive link color
Dark Mode
Separate colors for dark mode
Typography
Optional custom font for links specifically.
Tips
Keep primary button highly visible (this drives conversions)
Use hover states to give subtle feedback (e.g., slightly darker or elevated)
Ensure contrast ratios meet accessibility standards
Wait a few seconds after making a change to see the results
Last updated
Was this helpful?