А мне так больше по вкусу
<style>
button {
font-size: 0.8rem;
padding: 0.4rem 1rem 0.45rem;
background: none;
border: 1px solid;
border-radius: 0.25rem;
min-width: 9em;
margin: 0.25rem;
}
[disabled]{
color: hsl(210, 61%, 31%);
background-color: hsla(210, 61%, 51%, 0.1);
}
[error]{
color: hsla(0, 61%, 51%, 0.5);
background: white;
}
[progress]{
color: hsl(210, 61%, 31%);
background: linear-gradient(to top right, hsl(0, 100%, 100%), hsl(0, 100%, 100%) 25%, hsl(221, 100%, 97%) 25%, hsl(221, 100%, 97%) 50%, hsl(0, 100%, 100%) 50%, hsl(0, 100%, 100%) 75%, hsl(221, 100%, 97%) 75%, hsl(221, 100%, 97%)) 0 0 / 8rem 8rem;
}
</style>
<button>Normal</button>
<button disabled>Disabled</button>
<button error>Error</button>
<button progress>In Progress</button>