JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<a href="#" class="button">Button Text</a><a href="#" class="button">Button Text</a>

SCSS

.button {
  --bg-color: #0ec0c0;
  display: inline-block;
  padding: 15px 40px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bold;
  letter-spacing: .05em;
  position: relative;
  line-height: 1;
  background-image: linear-gradient(105deg, transparent 45%, #0ec0c0 50%),
    linear-gradient(#0ec0c0 0, #0ec0c0 0),
    linear-gradient(105deg, #0ec0c0 45%, transparent 50%);
  background-size: 13px 100%, calc(100% - 26px) 100%, 13px 100%;
  background-repeat: no-repeat;
  background-position: left, center, right;
  transition: background-image 250ms;
  border-radius: 3px;

  &:hover {
    background-image: linear-gradient(105deg, transparent 45%, #0d9999 50%),
      linear-gradient(#0d9999 0, #0d9999 0),
      linear-gradient(105deg, #0d9999 45%, transparent 50%);
  }
}