Buttons
This design system utilizes 2 types of button: primary and secondary, each with their own hover state. Both buttons can be used on dark or light backgrounds.
Accessibility
Both primary and secondary buttons, when not in their hover state, utilize black text on a white background or vice versa. This is to ensure legibility.
Due to its' low contrast ratio, marigold text on a white background, or vice versa, should only be used for buttons in a hover state.
To increase legibility, white buttons on a white background, or black buttons on a black background, should be outlined in a high contrast color. Additionally, all button text should be bolded.
Usage
Buttons must be labeled with the action they let user perform.
When only one button is in use, use primary button on white background or secondary button on dark background.
Do not use buttons for same-page anchor points.
HTML & CSS
Primary Buttons
<button type="button" class="btn btn-outline-primary px-5 py-3">Primary Button</button>
.btn-outline-primary {
border-color: #121212;
color: #121212;
border-radius: 30px;
border-width: 2px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19.20px;
}
.btn-outline-primary : hover {
background-color: #F2AB27;
border-color: #F2AB27;
color: white;
}
Secondary Buttons
<button type="button" class="btn btn-outline-secondary px-5 py-3">Secondary Button</button>
.btn-outline-secondary {
border-color: #ffffff;
color: #ffffff;
background-color: #121212;
border-radius: 30px;
border-width: 2px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19.20px;
}
.btn-outline-secondary : hover {
background-color: #ffffff;
border-color: #f2ab27;
color: #f2ab27;
}