Themed buttons

Interactive elements for initiating actions or linking to other content.

Standard Buttons

Bare bones buttons in every theme. For your clicking pleasure.

Code Example

<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-cta">CTA</button>
<button class="btn-accent">Accent</button>
<button class="btn-dark">Dark</button>
<button class="btn-light">Light</button>
<button>Default</button>

Outlined Buttons

In need of a button, but without the hefty background colors?

Ensure sufficient background contrast when using outlined buttons.

Code Example

<button class="btn-primary-outline">Primary</button>
<button class="btn-secondary-outline">Secondary</button>
<button class="btn-cta-outline">CTA</button>
<button class="btn-accent-outline">Accent</button>
<button class="btn-dark-outline">Dark</button>
<button class="btn-light-outline">Light</button>

Links as buttons

Primary

Secondary

CTA

Accent

Dark

Light

Primary

Secondary

CTA

Accent

Dark

Light

Code Example

<a class="btn btn-primary">Primary</a>
<a class="btn btn-primary-outline">Primary</a>

<a class="btn btn-secondary">Secondary</a>
<a class="btn btn-secondary-outline">Secondary</a>

<a class="btn btn-cta">CTA</a>
<a class="btn btn-cta-outline">CTA</a>

<a class="btn btn-accent">Accent</a>
<a class="btn btn-accent-outline">Accent</a>

<a class="btn btn-dark">Dark</a>
<a class="btn btn-dark-outline">Dark</a>

<a class="btn btn-light">Light</a>
<a class="btn btn-light-outline">Light</a>

Button sizes

Code Example

<button class="btn-sm">btn-sm</button>
<button class="btn-md">btn-md</button>
<button class="btn-lg">btn-lg</button>
<button class="btn-xl">btn-xl</button>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.