Buttons, links styled as classes instead of elements

[keiranking]

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.

[tysongach]

However, introducing classes in Bitters would represent a major philosophical change.

I think it would be worthwhile for us to explore this. Bitters having only element styles has been a “soft” feature or intention (from my perspective). I’m not sure we’ve ever fully explained or documented why that is and so it feels open to interpretation and iteration. I am very keen on not limiting ourselves to just element styles and would be fine with classes existing here.

---

@keiranking Bitters aside, do you have a preferred means of tackling what you describe above? In a perfect situation, what’s your ideal way of styling buttons?