Buttons

Buttons invite and trigger key actions throughout the experience

Primary

.bt1d-button

<a role="button" href="#" class="bt1d-button">Button</a>

<div class="bt1d-navy-background-color">
  <a role="button" href="#" class="bt1d-button">Button</a>
</div>

Light

Default

Background Color: Blue
Text: White
Border: Blue
Outline: Transparent

Hover

Background Color: Navy
Border: Navy

Focus

Outline: Blue

Disabled

Background Color: Medium Gray
Text: Dark Gray
Border: Medium Gray

Dark

Default

Background Color: White
Text: Blue
Border: White
Outline: Transparent

Hover

Background Color: Cyan
Text: Navy
Border: Cyan

Focus

Outline: White

Disabled

Background Color: Medium Gray
Text: Dark Gray
Border: Medium Gray

Secondary

.bt1d-button .bt1d-button--secondary

Button

<a role="button" href="#" class="bt1d-button bt1d-button--secondary">Button</a>

<div class="bt1d-navy-background-color">
  <a role="button" href="#" class="bt1d-button bt1d-button--secondary">Button</a>
</div>

Light

Default

Background Color: Transparent
Text: Blue
Border: Blue
Outline: Transparent

Hover

Text: Navy
Border: Navy

Focus

Outline: Blue

Disabled

Text: Dark Gray
Border: Medium Gray

Dark

Default

Background Color: Transparent
Text: White
Border: White
Outline: Transparent

Hover

Text: Cyan
Border: Cyan

Focus

Outline: White

Disabled

Text: Dark Gray
Border: Medium Gray

Link Style

.bt1d-button .bt1d-button--link

Button

<a role="button" href="#" class="bt1d-button bt1d-button--link">Button</a>

<div class="bt1d-navy-background-color">
  <a role="button" href="#" class="bt1d-button bt1d-button--link">Button</a>
</div>

Light

Default

Text: Blue
Outline: Transparent

Hover

Text: Navy

Focus

Outline: Blue

Disabled

Text: Dark Gray
Outline: Transparent

Dark

Default

Text: White
Outline: Transparent

Hover

Text: Cyan

Focus

Outline: White

Disabled

Text: Dark Gray
Outline: Transparent

Large Link Style

.bt1d-button .bt1d-button--large-link

Button

<a role="button" href="#" class="bt1d-button bt1d-button--large-link">Button</a>

<div class="bt1d-navy-background-color">
  <a role="button" href="#" class="bt1d-button bt1d-button--large-link">Button</a>
</div>

Light

Default

Text: Blue
Outline: Transparent

Hover

Text: Navy

Focus

Outline: Blue

Disabled

Text: Dark Gray
Outline: Transparent

Dark

Default

Text: White
Outline: Transparent

Hover

Text: Cyan

Focus

Outline: White

Disabled

Text: Dark Gray
Outline: Transparent

Need Help?

If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.

get in touch