@appearhere/bloom/components/Btn/Btn.css

Appear Here's pattern library and styleguide

.root {
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-greyDarker);
  border-color: var(--color-greyDarker);
  border-radius: 0;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: var(--color-white);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-avenir);
  font-size: var(--fontsize-regular);
  font-weight: var(--fontweight-demi);
  height: auto;
  line-height: normal;
  padding: var(--size-sm-i) var(--size-regular);
  text-decoration: none;
  transition-timing-function: cubic-bezier(0,1,.75,1);
  transition: background-color 300ms, color 300ms, border-color 300ms;
  vertical-align: bottom;
}

.high {
  padding: var(--size-regular) var(--size-lg-i);
}

.root svg {
  vertical-align: top;
}

.root:enabled:focus,
.root:enabled:hover {
  background-color: var(--color-greyDark);
  border-color: var(--color-greyDark);
  color: var(--color-white);
}

.root:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.root:active {
  box-shadow: inset 0 0 2px var(--color-transparent-black-iv);
}

.subtle:active {
  box-shadow: none;
}

.root.hollow {
  color: var(--color-grey);
  background-color: transparent;
  border-color: var(--color-greyLighter);
}

.root.hollow:enabled:focus,
.root.hollow:enabled:hover {
  border-color: var(--color-greyDark);
  background-color: transparent;
  color: var(--color-greyDark);
}

.root.subtle {
  color: var(--color-greyDarker);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
}

.root.subtle:enabled:focus,
.root.subtle:enabled:hover {
  color: var(--color-grey);
  background-color: transparent;
  border-color: transparent;
}

.root.subtle:disabled {
  text-decoration: none;
}

.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.primary:enabled:focus,
.primary:enabled:hover {
  background-color: var(--color-primary--light);
  border-color: var(--color-primary--light);
}

.primary.hollow {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.primary.hollow:enabled:focus,
.primary.hollow:enabled:hover {
  border-color: var(--color-primary--light);
  color: var(--color-primary);
}

.primary.subtle {
  color: var(--color-primary);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.primary.subtle:enabled:focus,
.primary.subtle:enabled:hover {
  color: var(--color-primary--light);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.action {
  background-color: var(--color-action);
  color: var(--color-white);
  border-color: var(--color-action);
}

.action:enabled:focus,
.action:enabled:hover {
  background-color: var(--color-action--light);
  color: var(--color-white);
  border-color: var(--color-action--light);
}

.action.hollow {
  color: var(--color-action);
  background-color: transparent;
  border-color: var(--color-action);
}

.action.hollow:enabled:focus,
.action.hollow:enabled:hover {
  border-color: var(--color-action--light);
  color: var(--color-action--light);
}
.action.subtle {
  color: var(--color-action);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.action.subtle:enabled:focus,
.action.subtle:enabled:hover {
  color: var(--color-action--light);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}
.danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.danger:enabled:focus,
.danger:enabled:hover {
  background-color: var(--color-danger--light);
  border-color: var(--color-danger--light);
}

.danger.hollow {
  color: var(--color-danger);
  background-color: transparent;
  border-color: currentColor;
}

.danger.hollow:enabled:focus,
.danger.hollow:enabled:hover {
  border-color: var(--color-danger--light);
  color: var(--color-danger--light);
}

.danger.subtle {
  color: var(--color-danger);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.danger.subtle:enabled:focus,
.danger.subtle:enabled:hover {
  color: var(--color-danger--light);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.whiteout {
  background-color: var(--color-greyLightest);
  border-color: var(--color-greyLightest);
  color: var(--color-greyDarker);
}

.whiteout:enabled:focus,
.whiteout:enabled:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-greyDarkest);
}

.whiteout.hollow {
  color: var(--color-greyLighter);
  background-color: transparent;
  border-color: var(--color-greyLighter);
}

.whiteout.hollow:enabled:focus,
.whiteout.hollow:enabled:hover {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.whiteout.subtle {
  color: var(--color-greyLighter);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLighter);
}

.whiteout.subtle:enabled:focus,
.whiteout.subtle:enabled:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}