Button classes

The included Button module covers most use cases. For situations where you need a button inside a Rich Text field, or want to apply theme styles to HubSpot CTA (legacy) buttons, see the classes and code snippets below, along with these quick guides:

How to add a simple link button in Rich Text

The code snippets for this are in the second code box next to each button style. Watch this quick YouTube video to see the steps.

How to apply theme styles to HubSpot legacy CTAs

The classes are listed in the first code box next to each button. Watch this quick YouTube video to see the steps.

Classes

Here are all the available button styles/classes in Act3:

Accent

Takes the Accent color/gradient from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--accent` `btn btn--fill btn--small btn--accent` HTML `<a class="btn btn--fill btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--accent` `btn btn--fill btn--medium btn--accent` HTML `<a class="btn btn--fill btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--accent` `btn btn--fill btn--large btn--accent` HTML `<a class="btn btn--fill btn--large btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--accent` `btn btn--outline btn--small btn--accent` HTML `<a class="btn btn--outline btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--accent` `btn btn--outline btn--medium btn--accent` HTML `<a class="btn btn--outline btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--accent` `btn btn--outline btn--large btn--accent` HTML `<a class="btn btn--outline btn--large btn--accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--accent" href="https://yourlinkurl.com/example">Text</a>`

Accent (Pill)

Takes the Accent color/gradient from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--accent btn--pill` `btn btn--fill btn--small btn--accent btn--pill` HTML `<a class="btn btn--fill btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--accent btn--pill` `btn btn--fill btn--medium btn--accent btn--pill` HTML `<a class="btn btn--fill btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--accent btn--pill` `btn btn--fill btn--large btn--accent btn--pill` HTML `<a class="btn btn--fill btn--large btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--accent btn--pill` `btn btn--outline btn--small btn--accent btn--pill` HTML `<a class="btn btn--outline btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--accent btn--pill` `btn btn--outline btn--medium btn--accent btn--pill` HTML `<a class="btn btn--outline btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--accent btn--pill` `btn btn--outline btn--large btn--accent btn--pill` HTML `<a class="btn btn--outline btn--large btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`

Dark

Takes the Dark gray color from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--dark` `btn btn--fill btn--small btn--dark` HTML `<a class="btn btn--fill btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--dark` `btn btn--fill btn--medium btn--dark` HTML `<a class="btn btn--fill btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--dark` `btn btn--fill btn--large btn--dark` HTML `<a class="btn btn--fill btn--large btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--dark` `btn btn--outline btn--small btn--dark` HTML `<a class="btn btn--outline btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--dark` `btn btn--outline btn--medium btn--dark` HTML `<a class="btn btn--outline btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--dark` `btn btn--outline btn--large btn--dark` HTML `<a class="btn btn--outline btn--large btn--dark" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--dark" href="https://yourlinkurl.com/example">Text</a>`

Dark (Pill)

Takes the Dark gray color from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--dark btn--pill` `btn btn--fill btn--small btn--dark btn--pill` HTML `<a class="btn btn--fill btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--dark btn--pill` `btn btn--fill btn--medium btn--dark btn--pill` HTML `<a class="btn btn--fill btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--dark btn--pill` `btn btn--fill btn--large btn--dark btn--pill` HTML `<a class="btn btn--fill btn--large btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--dark btn--pill` `btn btn--outline btn--small btn--dark btn--pill` HTML `<a class="btn btn--outline btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--dark btn--pill` `btn btn--outline btn--medium btn--dark btn--pill` HTML `<a class="btn btn--outline btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--dark btn--pill` `btn btn--outline btn--large btn--dark btn--pill` HTML `<a class="btn btn--outline btn--large btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`

Light

Takes the Light gray color from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--light` `btn btn--fill btn--small btn--light` HTML `<a class="btn btn--fill btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--light` `btn btn--fill btn--medium btn--light` HTML `<a class="btn btn--fill btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--light` `btn btn--fill btn--large btn--light` HTML `<a class="btn btn--fill btn--large btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--light` `btn btn--outline btn--small btn--light` HTML `<a class="btn btn--outline btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--light` `btn btn--outline btn--medium btn--light` HTML `<a class="btn btn--outline btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--light` `btn btn--outline btn--large btn--light` HTML `<a class="btn btn--outline btn--large btn--light" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--light" href="https://yourlinkurl.com/example">Text</a>`

Light (Pill)

Takes the Light gray color from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--light btn--pill` `btn btn--fill btn--small btn--light btn--pill` HTML `<a class="btn btn--fill btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--light btn--pill` `btn btn--fill btn--medium btn--light btn--pill` HTML `<a class="btn btn--fill btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--light btn--pill` `btn btn--fill btn--large btn--light btn--pill` HTML `<a class="btn btn--fill btn--large btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--light btn--pill` `btn btn--outline btn--small btn--light btn--pill` HTML `<a class="btn btn--outline btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--light btn--pill` `btn btn--outline btn--medium btn--light btn--pill` HTML `<a class="btn btn--outline btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--light btn--pill` `btn btn--outline btn--large btn--light btn--pill` HTML `<a class="btn btn--outline btn--large btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`

Light, Darker

Takes the Borders color from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--light-darker` `btn btn--fill btn--small btn--light-darker` HTML `<a class="btn btn--fill btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--light-darker` `btn btn--fill btn--medium btn--light-darker` HTML `<a class="btn btn--fill btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--light-darker` `btn btn--fill btn--large btn--light-darker` HTML `<a class="btn btn--fill btn--large btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--light-darker` `btn btn--outline btn--small btn--light-darker` HTML `<a class="btn btn--outline btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--light-darker` `btn btn--outline btn--medium btn--light-darker` HTML `<a class="btn btn--outline btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--light-darker` `btn btn--outline btn--large btn--light-darker` HTML `<a class="btn btn--outline btn--large btn--light-darker" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`

Light, Darker (Pill)

Takes the Borders color from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--light-darker btn--pill` `btn btn--fill btn--small btn--light-darker btn--pill` HTML `<a class="btn btn--fill btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--light-darker btn--pill` `btn btn--fill btn--medium btn--light-darker btn--pill` HTML `<a class="btn btn--fill btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--light-darker btn--pill` `btn btn--fill btn--large btn--light-darker btn--pill` HTML `<a class="btn btn--fill btn--large btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--light-darker btn--pill` `btn btn--outline btn--small btn--light-darker btn--pill` HTML `<a class="btn btn--outline btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--light-darker btn--pill` `btn btn--outline btn--medium btn--light-darker btn--pill` HTML `<a class="btn btn--outline btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--light-darker btn--pill` `btn btn--outline btn--large btn--light-darker btn--pill` HTML `<a class="btn btn--outline btn--large btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`

White

White buttons that look great on dark backgrounds.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white` `btn btn--fill btn--small btn--white` HTML `<a class="btn btn--fill btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white` `btn btn--fill btn--medium btn--white` HTML `<a class="btn btn--fill btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white` `btn btn--fill btn--large btn--white` HTML `<a class="btn btn--fill btn--large btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white` `btn btn--outline btn--small btn--white` HTML `<a class="btn btn--outline btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white` `btn btn--outline btn--medium btn--white` HTML `<a class="btn btn--outline btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white` `btn btn--outline btn--large btn--white` HTML `<a class="btn btn--outline btn--large btn--white" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white" href="https://yourlinkurl.com/example">Text</a>`

White (Pill)

White buttons that look great on dark backgrounds.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white btn--pill` `btn btn--fill btn--small btn--white btn--pill` HTML `<a class="btn btn--fill btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white btn--pill` `btn btn--fill btn--medium btn--white btn--pill` HTML `<a class="btn btn--fill btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white btn--pill` `btn btn--fill btn--large btn--white btn--pill` HTML `<a class="btn btn--fill btn--large btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white btn--pill` `btn btn--outline btn--small btn--white btn--pill` HTML `<a class="btn btn--outline btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white btn--pill` `btn btn--outline btn--medium btn--white btn--pill` HTML `<a class="btn btn--outline btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white btn--pill` `btn btn--outline btn--large btn--white btn--pill` HTML `<a class="btn btn--outline btn--large btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`

White, Accent

White buttons with the Accent color (or fallback color if you are using a gradient) from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white-accent` `btn btn--fill btn--small btn--white-accent` HTML `<a class="btn btn--fill btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white-accent` `btn btn--fill btn--medium btn--white-accent` HTML `<a class="btn btn--fill btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white-accent` `btn btn--fill btn--large btn--white-accent` HTML `<a class="btn btn--fill btn--large btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white-accent` `btn btn--outline btn--small btn--white-accent` HTML `<a class="btn btn--outline btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white-accent` `btn btn--outline btn--medium btn--white-accent` HTML `<a class="btn btn--outline btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white-accent` `btn btn--outline btn--large btn--white-accent` HTML `<a class="btn btn--outline btn--large btn--white-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`

White, Accent (Pill)

White buttons with the Accent color (or fallback color if you are using a gradient) from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white-accent btn--pill` `btn btn--fill btn--small btn--white-accent btn--pill` HTML `<a class="btn btn--fill btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white-accent btn--pill` `btn btn--fill btn--medium btn--white-accent btn--pill` HTML `<a class="btn btn--fill btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white-accent btn--pill` `btn btn--fill btn--large btn--white-accent btn--pill` HTML `<a class="btn btn--fill btn--large btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white-accent btn--pill` `btn btn--outline btn--small btn--white-accent btn--pill` HTML `<a class="btn btn--outline btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white-accent btn--pill` `btn btn--outline btn--medium btn--white-accent btn--pill` HTML `<a class="btn btn--outline btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white-accent btn--pill` `btn btn--outline btn--large btn--white-accent btn--pill` HTML `<a class="btn btn--outline btn--large btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`

White, Hover Accent

White buttons with the hover Accent color (or fallback color if you are using a gradient) from your theme settings.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white-hover-accent` `btn btn--fill btn--small btn--white-hover-accent` HTML `<a class="btn btn--fill btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white-hover-accent` `btn btn--fill btn--medium btn--white-hover-accent` HTML `<a class="btn btn--fill btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white-hover-accent` `btn btn--fill btn--large btn--white-hover-accent` HTML `<a class="btn btn--fill btn--large btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white-hover-accent` `btn btn--outline btn--small btn--white-hover-accent` HTML `<a class="btn btn--outline btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white-hover-accent` `btn btn--outline btn--medium btn--white-hover-accent` HTML `<a class="btn btn--outline btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white-hover-accent` `btn btn--outline btn--large btn--white-hover-accent` HTML `<a class="btn btn--outline btn--large btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`

White, Hover Accent (Pill)

White buttons with the Accent color (or fallback color if you are using a gradient) from your theme settings.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--white-hover-accent btn--pill` `btn btn--fill btn--small btn--white-hover-accent btn--pill` HTML `<a class="btn btn--fill btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--white-hover-accent btn--pill` `btn btn--fill btn--medium btn--white-hover-accent btn--pill` HTML `<a class="btn btn--fill btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--white-hover-accent btn--pill` `btn btn--fill btn--large btn--white-hover-accent btn--pill` HTML `<a class="btn btn--fill btn--large btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--white-hover-accent btn--pill` `btn btn--outline btn--small btn--white-hover-accent btn--pill` HTML `<a class="btn btn--outline btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--white-hover-accent btn--pill` `btn btn--outline btn--medium btn--white-hover-accent btn--pill` HTML `<a class="btn btn--outline btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--white-hover-accent btn--pill` `btn btn--outline btn--large btn--white-hover-accent btn--pill` HTML `<a class="btn btn--outline btn--large btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`

Ghost

Transparent white buttons that look great on dark backgrounds.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--ghost` `btn btn--fill btn--small btn--ghost` HTML `<a class="btn btn--fill btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--ghost` `btn btn--fill btn--medium btn--ghost` HTML `<a class="btn btn--fill btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--ghost` `btn btn--fill btn--large btn--ghost` HTML `<a class="btn btn--fill btn--large btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--ghost` `btn btn--outline btn--small btn--ghost` HTML `<a class="btn btn--outline btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--ghost` `btn btn--outline btn--medium btn--ghost` HTML `<a class="btn btn--outline btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--ghost` `btn btn--outline btn--large btn--ghost` HTML `<a class="btn btn--outline btn--large btn--ghost" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--ghost" href="https://yourlinkurl.com/example">Text</a>`

Ghost (Pill)

Transparent white buttons that look great on dark backgrounds.

All your buttons take a pill shape if you select a large button radius in your theme settings. Otherwise, you can still make pill buttons with the btn--pill extra class.

Preview	Classes and code snippets
Button	Classes `btn btn--fill btn--small btn--ghost btn--pill` `btn btn--fill btn--small btn--ghost btn--pill` HTML `<a class="btn btn--fill btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--medium btn--ghost btn--pill` `btn btn--fill btn--medium btn--ghost btn--pill` HTML `<a class="btn btn--fill btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--fill btn--large btn--ghost btn--pill` `btn btn--fill btn--large btn--ghost btn--pill` HTML `<a class="btn btn--fill btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--fill btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--small btn--ghost btn--pill` `btn btn--outline btn--small btn--ghost btn--pill` HTML `<a class="btn btn--outline btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--medium btn--ghost btn--pill` `btn btn--outline btn--medium btn--ghost btn--pill` HTML `<a class="btn btn--outline btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	Classes `btn btn--outline btn--large btn--ghost btn--pill` `btn btn--outline btn--large btn--ghost btn--pill` HTML `<a class="btn btn--outline btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>` `<a class="btn btn--outline btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`