# Buttons & Links

Buttons & Links define all interactive elements—primary actions, secondary actions, and navigation links.

***

#### **Buttons**

<figure><img src="https://3302412606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPzuLy4HwYJtL2cvBab9d%2Fuploads%2FgQw6nKhN9GT7hcm56AoU%2FScreenshot%202026-03-19%20at%2014.57.22.png?alt=media&#x26;token=843fb68a-1f6b-478d-b0f0-7de134128080" alt=""><figcaption></figcaption></figure>

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](https://fontsource.org/tools/converter)
* 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.&#x20;
* To easily find local fonts you can use Font Book on Macs and Fonts inside control panel on Windows.

<figure><img src="https://3302412606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPzuLy4HwYJtL2cvBab9d%2Fuploads%2Fk5v3F1BIWqL85Uij48Mh%2FScreenshot%202026-03-19%20at%2014.58.56.png?alt=media&#x26;token=5ef6b8a6-343a-4206-b8ac-11468f54e164" alt=""><figcaption></figcaption></figure>

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)

{% hint style="info" %}
When you define a custom background or text color, we do a [WCAG color contrast check](https://accessibleweb.com/color-contrast-checker/), and you're only able to save the color if contrast is higher than 3:1.
{% endhint %}

**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**

<figure><img src="https://3302412606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPzuLy4HwYJtL2cvBab9d%2Fuploads%2FVNSaVKOLERYucyAip92m%2FScreenshot%202026-03-19%20at%2015.13.36.png?alt=media&#x26;token=2d4a3fd6-3367-4e37-a335-2ae430de5dac" alt=""><figcaption></figcaption></figure>

**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