DONATE

Button Showcase

This page displays all button styles from the Voice4Girls theme based on Figma designs.

Button Sizes

Large (Default) Medium Size Small Size
<a class="button btn-primary">Large</a>
<a class="button btn-primary btn-md">Medium</a>
<a class="button btn-primary btn-sm">Small</a>

Primary Buttons

Primary Purple Primary Light
<a class="button btn-primary">Primary Purple</a>
<a class="button btn-primary-light">Primary Light</a>

Hover, Active & Disabled States

Active Disabled Active Disabled

Secondary Buttons (Outlined)

Secondary Purple Secondary Pink Secondary Light
<a class="button btn-secondary-purple">Secondary Purple</a>
<a class="button btn-secondary-pink">Secondary Pink</a>
<a class="button btn-secondary-light">Secondary Light</a>

Hover, Active & Disabled States

Tertiary Buttons (Text Only)

Tertiary Purple Tertiary Pink Purple With Underline Yellow With Underline
<a class="button btn-tertiary-purple">Tertiary Purple</a>
<a class="button btn-tertiary-pink">Tertiary Pink</a>
<a class="button btn-tertiary-purple-alt">Purple With Underline</a>
<a class="button btn-tertiary-yellow-alt">Yellow With Underline</a>

Active & Disabled States

Active Disabled Active With Pink Underline Active With Yellow Underline

Buttons With Icons

Icon Left Icon Right
<a class="button btn-primary with-icon"><svg>...</svg>Icon Left</a>
<a class="button btn-primary with-icon icon-right">Icon Right<svg>...</svg></a>

Full Width Button

Full Width Button
<a class="button btn-primary full-width">Full Width Button</a>

Button Examples on Different Backgrounds

On Purple Background

Primary Light Secondary Light Tertiary Yellow

On Light Background

Primary Purple Secondary Purple Tertiary Purple

On Pink Background

Primary Purple Secondary Pink Tertiary Pink

Legacy Button Styles

.cta

Header CTA

.button-white

Button White

.cta-button-container

Learn More Explore Here

.subscribe-btn (Newsletter)

Programme Buttons

Programme Link 1 Active Programme Link Programme Link 2

.button-white (in .cta-banner context)

Button White in CTA Banner