JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<button class="button -primary">primary</button>
<button class="button -primary -outline">outline</button>

<button class="button -secondary">primary</button>
<button class="button -secondary -outline">outline</button>

SCSS

.button {
  font-size: 3em;
  border: 0;
  background-color: transparent;
  padding: 1em 1.618em;

  position: relative;
  xfilter: invert(1);

  &:before {
    content: '';
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background-color: currentColor;
    xfilter: invert(1);
  }

  &.-primary {
    color: red;
  }
  &.-secondary {
    color: blue;
  }
}