Button classes

You can use the included Button module for most of your page buttons. Still, in those particular cases where you may need to add a button in a Rich Text field or if you want to apply theme styles to HubSpot CTA (legacy) buttons, there are classes and code snippets listed here and also these quick guides on how to use them:

How to apply theme styles to HubSpot CTA (legacy) buttons

The classes are listed in the first code box next to each button. Please watch the video below for a quick guide:

How to add a simple link button in Rich Text

The code snippets you can use for this are listed in the second code box next to each button. Please watch the video below for a quick guide:

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

Accent

Takes the Accent color/gradient from your theme settings.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--accent` `<a class="btn btn--fill btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--accent` `<a class="btn btn--fill btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--accent` `<a class="btn btn--fill btn--large btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--accent` `<a class="btn btn--outline btn--small btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--accent` `<a class="btn btn--outline btn--medium btn--accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--accent` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--accent btn--pill` `<a class="btn btn--fill btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--accent btn--pill` `<a class="btn btn--fill btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--accent btn--pill` `<a class="btn btn--fill btn--large btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--accent btn--pill` `<a class="btn btn--outline btn--small btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--accent btn--pill` `<a class="btn btn--outline btn--medium btn--accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--accent btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--dark` `<a class="btn btn--fill btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--dark` `<a class="btn btn--fill btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--dark` `<a class="btn btn--fill btn--large btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--dark` `<a class="btn btn--outline btn--small btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--dark` `<a class="btn btn--outline btn--medium btn--dark" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--dark` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--dark btn--pill` `<a class="btn btn--fill btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--dark btn--pill` `<a class="btn btn--fill btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--dark btn--pill` `<a class="btn btn--fill btn--large btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--dark btn--pill` `<a class="btn btn--outline btn--small btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--dark btn--pill` `<a class="btn btn--outline btn--medium btn--dark btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--dark btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--light` `<a class="btn btn--fill btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--light` `<a class="btn btn--fill btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--light` `<a class="btn btn--fill btn--large btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--light` `<a class="btn btn--outline btn--small btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--light` `<a class="btn btn--outline btn--medium btn--light" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--light` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--light btn--pill` `<a class="btn btn--fill btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--light btn--pill` `<a class="btn btn--fill btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--light btn--pill` `<a class="btn btn--fill btn--large btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--light btn--pill` `<a class="btn btn--outline btn--small btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--light btn--pill` `<a class="btn btn--outline btn--medium btn--light btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--light btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--light-darker` `<a class="btn btn--fill btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--light-darker` `<a class="btn btn--fill btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--light-darker` `<a class="btn btn--fill btn--large btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--light-darker` `<a class="btn btn--outline btn--small btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--light-darker` `<a class="btn btn--outline btn--medium btn--light-darker" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--light-darker` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--light-darker btn--pill` `<a class="btn btn--fill btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--light-darker btn--pill` `<a class="btn btn--fill btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--light-darker btn--pill` `<a class="btn btn--fill btn--large btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--light-darker btn--pill` `<a class="btn btn--outline btn--small btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--light-darker btn--pill` `<a class="btn btn--outline btn--medium btn--light-darker btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--light-darker btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white` `<a class="btn btn--fill btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white` `<a class="btn btn--fill btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white` `<a class="btn btn--fill btn--large btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white` `<a class="btn btn--outline btn--small btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white` `<a class="btn btn--outline btn--medium btn--white" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white btn--pill` `<a class="btn btn--fill btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white btn--pill` `<a class="btn btn--fill btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white btn--pill` `<a class="btn btn--fill btn--large btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white btn--pill` `<a class="btn btn--outline btn--small btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white btn--pill` `<a class="btn btn--outline btn--medium btn--white btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white-accent` `<a class="btn btn--fill btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white-accent` `<a class="btn btn--fill btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white-accent` `<a class="btn btn--fill btn--large btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white-accent` `<a class="btn btn--outline btn--small btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white-accent` `<a class="btn btn--outline btn--medium btn--white-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white-accent` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white-accent btn--pill` `<a class="btn btn--fill btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white-accent btn--pill` `<a class="btn btn--fill btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white-accent btn--pill` `<a class="btn btn--fill btn--large btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white-accent btn--pill` `<a class="btn btn--outline btn--small btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white-accent btn--pill` `<a class="btn btn--outline btn--medium btn--white-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white-accent btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white-hover-accent` `<a class="btn btn--fill btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white-hover-accent` `<a class="btn btn--fill btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white-hover-accent` `<a class="btn btn--fill btn--large btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white-hover-accent` `<a class="btn btn--outline btn--small btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white-hover-accent` `<a class="btn btn--outline btn--medium btn--white-hover-accent" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white-hover-accent` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--white-hover-accent btn--pill` `<a class="btn btn--fill btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--white-hover-accent btn--pill` `<a class="btn btn--fill btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--white-hover-accent btn--pill` `<a class="btn btn--fill btn--large btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--white-hover-accent btn--pill` `<a class="btn btn--outline btn--small btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--white-hover-accent btn--pill` `<a class="btn btn--outline btn--medium btn--white-hover-accent btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--white-hover-accent btn--pill` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--ghost` `<a class="btn btn--fill btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--ghost` `<a class="btn btn--fill btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--ghost` `<a class="btn btn--fill btn--large btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--ghost` `<a class="btn btn--outline btn--small btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--ghost` `<a class="btn btn--outline btn--medium btn--ghost" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--ghost` `<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.

Button sample with the default theme settings	CSS classes & code snippets
Button	`btn btn--fill btn--small btn--ghost btn--pill` `<a class="btn btn--fill btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--medium btn--ghost btn--pill` `<a class="btn btn--fill btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--fill btn--large btn--ghost btn--pill` `<a class="btn btn--fill btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--small btn--ghost btn--pill` `<a class="btn btn--outline btn--small btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--medium btn--ghost btn--pill` `<a class="btn btn--outline btn--medium btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`
Button	`btn btn--outline btn--large btn--ghost btn--pill` `<a class="btn btn--outline btn--large btn--ghost btn--pill" href="https://yourlinkurl.com/example">Text</a>`