Bitters' default <button> and <a> styles are very useful. However, it's often the case that you want an HTML button to visually appear as a link, or vice versa, which forces CSS to undo CSS, like this 33-line monster:
.button-link {
appearance: none;
background-color: transparent;
border-radius: none;
color: $action-color;
display: inline;
font-family: $base-font-family;
font-size: inherit;
-webkit-font-smoothing: antialiased;
font-weight: inherit;
line-height: $base-line-height;
padding: 0;
text-align: left;
text-decoration: underline;
transition: none;
user-select: auto;
vertical-align: middle;
white-space: normal;
&:hover {
background-color: transparent;
color: shade($action-color, 25%);
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
&:hover {
background-color: transparent;
}
}
}
I wrote that code, and I'm a worse person because of it.
Opt-in button and link classes might:
- prevent writing CSS to undo CSS
- allow button and link UI to be more intentional
- shift one of the more opinionated areas of Bitters to a more opinionated choice—a class
However, introducing classes in Bitters would represent a major philosophical change.
Bitters' default
<button>and<a>styles are very useful. However, it's often the case that you want an HTML button to visually appear as a link, or vice versa, which forces CSS to undo CSS, like this 33-line monster:I wrote that code, and I'm a worse person because of it.
Opt-in button and link classes might:
However, introducing classes in Bitters would represent a major philosophical change.