JSFiddle - React, Tailwind, and code Playground

by Vlad Rasenko

HTML

<button class="btn">
  <div class="bg"></div>
  Hello world
</button>

SCSS

.btn {
  padding: 12px 30px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  
  &, &:hover, &:focus, &:active {
    border-image-source: linear-gradient(to top, #a90000, #ff0000);
    border-image-slice: 1;
    border-width: 5px;
    border-radius: 10px;
    outline: none;
  }
}