CTA/Buttons
Buttons Large
Buttons are grouped into two main categories.
The Large Buttons have a font-size of 22px.
They’re often used in desktop layouts.
Primary Buttons – green.
Secondary Buttons – grey.
<button class="largeActiveButton">Cancel Subscription</button>
<button class="largeInactiveButton">Cancel Subscription</button>
<button class="largeActiveButton">Submit</button>
<button class="largeInactiveButton">Cancel</button>
Buttons Small
The Small Buttons have a font-size of 18px.
They’re often used in mobile layouts.
Primary Buttons – green.
Secondary Buttons – grey.
<button class="smallActiveButton">Cancel Subscription</button>
<button class="smallInactiveButton">Cancel Subscription</button>
<button class="smallActiveButton">Submit</button>
<button class="smallInactiveButton">Cancel</button>
Buttons (Disabled)
Disabled buttons prevent users from taking an action.
There’s no hover effect, they can not be clicked and are set to 50% opacity.
<button class="disabled m-2 largeActiveButton">Cancel Subscription</button>
<button class="disabled m-2 largeInactiveButton">Cancel Subscription</button>
<br>
<button class="disabled m-2 smallActiveButton">Submit</button>
<button class="disabled m-2 smallInactiveButton">Cancel</button>