Brand
convert.com

Button

Buttons trigger actions. Primary for the one main action per view; secondary, ghost, and outline for everything else.

Examples

Every variant rendered live from buttons.css. Primary carries the main action; the large primary is reserved for hero CTAs.

Variants

Start 15-Day Free Trial Primary · .btn-primary
Ask More Questions Secondary · .btn-secondary
Log In Ghost · .btn-ghost
Try For Free Outline · .btn-outline

Sizes

Default Default · .btn-primary
Large Large · .btn-primary--lg 
<!-- Variants -->
<a href="#" class="btn-primary">Start 15-Day Free Trial</a>
<a href="#" class="btn-secondary">Ask More Questions</a>
<a href="#" class="btn-ghost">Log In</a>
<a href="#" class="btn-outline">Try For Free</a>

<!-- Sizes -->
<a href="#" class="btn-primary">Default</a>
<a href="#" class="btn-primary btn-primary--lg">Large</a>

Usage

One clear primary action per view. Everything else steps down in weight.

  • Use exactly one .btn-primary, the main action, per view.
  • Use .btn-secondary for alternative or lower-priority actions alongside the primary.
  • .btn-ghost and .btn-outline are navbar-only; don't use them inside page content.
  • Primary CTA copy is "Start 15-Day Free Trial" across acquisition surfaces.

States

The primary button moves through four states. Default rests on --color-blue-600. On hover the background darkens to --color-blue-700 and a primary shadow lifts the button. On focus a 2px ring renders in --color-action-primary for keyboard users. Disabled drops opacity and removes pointer interaction.

Default Disabled

Code

Link the stylesheet once, then use the variant classes directly.

<link rel="stylesheet" href="/_shared/components/buttons.css">

<a href="#" class="btn-primary">Start 15-Day Free Trial</a>
<a href="#" class="btn-secondary">Ask More Questions</a>
<a href="#" class="btn-ghost">Log In</a>
<a href="#" class="btn-outline">Try For Free</a>
<a href="#" class="btn-primary btn-primary--lg">Start Free Trial</a>