button/link reset styles

_essential-button-baseline.css

/**
  * Focus styles should show up when using the tab key, but not when clicking the link or button.
  * You should have :focus-visible polyfill until it gains wider browser support.
  * https://github.com/WICG/focus-visible
  */

/**
  * Reset button styles
  * It takes some work to achieve a “blank slate” look.
  */
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/**
  * Optional: similar-looking links and buttons.
  * This helps if we use a <button> element but forget
  * to style it more: at least it will look clickable!
  */
a, button {
  color: #0000EE;
  text-decoration: underline;
}

/**
  * Button component
  */
.btn {
  /* default for <button>, but needed for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* button size comes from text + padding, avoid height */
  padding: 0.5em 1em;

  /* make sure colors have enough contrast! */
  color: #FFFFFF;
  background-color: #9555AF;
}

.btn:active {
  transform: scale(0.99);
  filter: saturate(150%);
}

/* inverse colors on hover */
.btn:hover {
  color: #9050AA;
  border-color: currentColor;
  background-color: white;
}

/* Firefox: remove the inner border shown on focus */
.btn::-moz-focus-inner {
  border: none;
}

/* make sure we have a visible focus ring */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
    0 0 0 1.5px rgba(255, 105, 180, 0.5);
}

/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}