Components menu
Buttons
Use a button to help users perform an action, such as submitting a form or starting an application.
When to use a button or a link
Button styling can be applied to either button or link elements. Use the appropriate element for the task: use a button element when the user is performing an action, use a link element when the user is navigating.
Try to limit the use of styling link elements to look like buttons, as this may confuse the visual clues for how that element can be interacted with.
Types of button
Primary
This is the default button style. Use this for your primary calls to action. Multiple primary buttons can confuse users so try to have only one of these per page (or section of a page).
HTML
<button type="button" class="btn btn-primary">
Primary <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-primary--tealBg">
Primary <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
Secondary
All other non-primary actions should use this style. It has less visual prominence than the primary button.
HTML
<button type="button" class="btn btn-secondary">
Secondary <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-floodline">
Floodline <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
Other buttons
HTML
<button type="button" class="btn btn-success">
Success <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-danger">
Danger <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-warning">
Warning <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
</button>
CSS
/* Buttons
------------------------------------ */
.btn-primary {
--bs-btn-color: #000000;
--bs-btn-bg: var(--verdant-green);
--bs-btn-border-color: var(--verdant-green);
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: var(--scottish-teal);
--bs-btn-hover-border-color: var(--scottish-dark-teal);
--bs-btn-focus-shadow-rgb: 113, 112, 110; /* Grey 2 */
--bs-btn-active-color: #000000;
--bs-btn-active-bg: var(--verdant-green);
--bs-btn-active-border-color: var(--scottish-dark-teal);
--bs-btn-active-shadow: inset 0 3px 5px rgba(223, 223, 223, 0.8); /* Grey 3 */
--bs-btn-disabled-color: var(--scottish-dark-teal);
--bs-btn-disabled-bg: var(--grey-three);
--bs-btn-disabled-border-color: var(--grey-two);
font-weight: 600;
border: 2px solid var(--verdant-green);
border-radius: 20px;
padding: 5px 30px;
margin: 0;
}
.btn-primary:active {
border: 2px solid;
}
.btn-primary:focus {
color: #000000;
border: 2px solid var(--scottish-dark-teal);
background-color: var(--verdant-green);
}
.btn-secondary {
background-color: var(--grey-one);
color: #ffffff;
font-weight: 600;
border: 2px solid var(--grey-two);
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-secondary:hover {
background-color: var(--grey-three);
color: #000000;
}
.btn-secondary:active {
border: 2px solid var(--grey-two);
border-color: #000000 !important;
}
.btn-secondary:focus {
color: #000000;
border: 2px solid var(--grey-one);
background-color: var(--grey-three);
--bs-btn-focus-shadow-rgb: 113, 112, 110; /* Grey 2 */
}
.btn-floodline {
background-color: var(--yellow);
color: #000000;
font-weight: 600;
border: 2px solid var(--yellow);
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-floodline:hover {
background-color: var(--scottish-teal);
color: #ffffff;
}
.btn-floodline:active {
border: 2px solid var(--scottish-teal);
}
.btn-floodline:focus {
color: #000000;
border: 2px solid var(--scottish-dark-teal);
background-color: var(--yellow);
--bs-btn-focus-shadow-rgb: 113, 112, 110; /* Grey 2 */
}
@media (min-width: 320px) {
.btn-primary, .btn-secondary, .btn-floodline {
padding: 5px 15px;
}
}
@media (min-width: 586px) {
.btn-primary, .btn-secondary, .btn-floodline {
padding: 5px 15px;
}
}
@media (min-width: 768px) {
.btn-primary, .btn-secondary, .btn-floodline {
padding: 5px 30px;
}
}
.btn-success {
--bs-btn-color: #ffffff;
--bs-btn-bg: var(--success-green);
--bs-btn-border-color: #2e5e2e;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #2e5e2e;
--bs-btn-hover-border-color: var(--success-green);
--bs-btn-focus-shadow-rgb: 60, 153, 110;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #146c43;
--bs-btn-active-border-color: #13653f;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #ffffff;
--bs-btn-disabled-bg: #00976e;
--bs-btn-disabled-border-color: #00976e;
font-weight: 600;
border: 0px;
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-danger {
background-color: var(--error-red);
color: #ffffff;
font-weight: 600;
border: none;
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-danger:hover {
background-color: #9a1904;
}
.btn-warning {
background-color: var(--warning-yellow);
color: #000000;
font-weight: 600;
border: none;
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-warning:hover {
background-color: #fddf55;
}
i.fa-solid.fa-arrow-right {
padding-left: 20px;
}
/* Outlined buttons
------------------------------------ */
.btn-outline-primary {
--bs-btn-color: var(--scottish-teal);
--bs-btn-border-color: var(--scottish-teal);
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: var(--scottish-teal);
--bs-btn-hover-border-color: var(--scottish-teal);
--bs-btn-focus-shadow-rgb: 13,110,253;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: var(--scottish-teal);
--bs-btn-active-border-color: var(--scottish-teal);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--scottish-teal);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--scottish-teal);
--bs-gradient: none;
margin: 0 2px;
}
.btn-outline-secondary {
--bs-btn-color: var(--grey-one);
--bs-btn-border-color: var(--grey-one);
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: var(--grey-one);
--bs-btn-hover-border-color: var(--grey-one);
--bs-btn-focus-shadow-rgb: 108,117,125;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: var(--grey-one);
--bs-btn-active-border-color: var(--grey-one);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--grey-one);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--grey-one);
--bs-gradient: none;
margin: 0 2px;
}
.btn-outline-floodline {
--bs-btn-color: var(--scottish-dark-teal);
--bs-btn-border-color: var(--yellow);
--bs-btn-hover-color: #000000;
--bs-btn-hover-bg: var(--yellow);
--bs-btn-hover-border-color: var(--yellow);
--bs-btn-focus-shadow-rgb: 108,117,125;
--bs-btn-active-color: #000000;
--bs-btn-active-bg: var(--yellow);
--bs-btn-active-border-color: var(--yellow);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--yellow);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--yellow);
--bs-gradient: none;
margin: 0 2px;
}
/* Teal background
------------------------------------ */
.btn-primary--tealBg {
background-color: var(--verdant-green);
color: #000000;
font-weight: 600;
border: none;
border-radius: 20px;
padding: 5px 30px;
margin: 5px;
}
.btn-primary--tealBg:hover {
background-color: #ffffff;
color: var(--scottish-teal);
}
.btn-primary--tealBg:focus {
background-color: var(--verdant-green);
border: var(--scottish-teal);
color: #000000;
}
.btn-primary--tealBg:active {
background-color: var(--verdant-green);
border: var(--scottish-teal);
color: #000000;
}
.btn-add {
background-color: #ffffff;
border: 1px solid var(--scottish-teal);
color: var(--scottish-dark-teal);
}
.btn-add:hover {
background-color: var(--scottish-teal);
border: 1px solid var(--scottish-teal);
color: #ffffff;
}
.btn-add:focus {
background-color: var(--verdant-green);
border: 1px solid var(--verdant-green);
color: #000000;
}