Disabled buttons have poor contrast and can confuse some users, so avoid them if possible. Only use disabled buttons if research shows it makes the user interface easier to understand.
https://design-system.service.gov.uk/components/button/#disabled-buttons
Secondary buttons should be avoided when possible. Some users can find confusing the differences between primary and seconday buttons. In general we recommend using only one call to action on a page, styled as our green button.
https://github.com/alphagov/govuk-design-system-backlog/issues/34#issuecomment-407407825
<button class="lbh-button" type="submit">
Save and continue
</button>
/*------------------------------------*\
#BUTTONS
\*------------------------------------*/
.lbh-button {
background-color: var(--background-button);
color: var(--colour-button);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
padding: 9px 12px 6px;
line-height: 1;
box-shadow: 0 2px 0 var(--shadow-button);
display: inline-block;
margin-bottom: calc(var(--spacing-main) * 2);
position: relative;
font-size: 100%;
}
.lbh-button--secondary {
border: 2px solid var(--background-button);
background-color: var(--background-button-secondary);
color: var(--colour-main);
}
.lbh-button:before {
content: "";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -4px;
left: -2px;
background: transparent;
}
.lbh-button[disabled],
.lbh-button--disabled {
background-color: var(--background-button-disabled);
box-shadow: 0 2px 0 var(--shadow-button-disabled);
cursor: default;
}
.lbh-button[disabled].lbh-button--secondary,
.lbh-button--disabled.lbh-button--secondary {
background-color: var(--background-button-secondary-disabled);
}
.lbh-button--arrow {
font-weight: 700;
padding: 12px 42px 8px 16px;
}
.lbh-button--arrow .lbh-icon--arrow {
width: 16px;
height: 20px;
position: absolute;
right: var(--spacing-main);
top: 10px;
}
.lbh-button--secondary .lbh-icon--arrow path:first-child {
fill: var(--colour-main);
}
.lbh-button:not([disabled]):not(.lbh-button--disabled):hover {
background-color: var(--hover-button);
}
.lbh-button--secondary:not([disabled]):not(.lbh-button--disabled):hover {
background-color: var(--hover-button-secondary);
}
.lbh-button:not([disabled]):not(.lbh-button--disabled):focus {
outline: 3px solid var(--focus-button);
outline-offset: 0;
}
.lbh-button:not([disabled]):not(.lbh-button--disabled):active {
top: 2px;
box-shadow: none;
}
.lbh-button:not([disabled]):not(.lbh-button--disabled):active:before {
top: -4px;
}