JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="sample">
    <h2>Original</h2>
    <div class="grid">
      <div><button class="button --original --bare">bare</button></div>
      <div><button class="button --original --primary-old">primary</button></div>
      <div><button class="button --original --secondary-old">secondary</button></div>
      <div><button class="button --original --action-old">action</button></div>
      <div><button class="button --original --neutral">neutral</button></div>
    </div>
  </div>

  <div class="sample">
    <h2>Flat</h2>
    <div class="grid">
      <div><button class="button --new --bare">bare</button></div>
      <div><button class="button --new --primary">primary</button></div>
      <div><button class="button --new --secondary">secondary</button></div>
      <div><button class="button --new --action">action</button></div>
      <div><button class="button --new --neutral">neutral</button></div>
    </div>
  </div>

  <div class="sample">
    <h2>Gradients</h2>
    <div class="grid">
    <div><button class="button --new --bare">bare</button></div>
    <div><button class="button --new --primary-gradient">primary</button></div>
    <div><button class="button --new --secondary-gradient">secondary</button></div>
    <div><button class="button --new --action-gradient">action</button></div>
    <div><button class="button --new --neutral-gradient">neutral</button></div>
  </div> 
  </div>
</div>

SCSS

* {
  box-sizing: border-box;  
}

$l-space: 1rem;
$theme-blue: #3139f2;
$theme-green: #20cb7e;
$theme-yellow: #ffce48;
$white: #fff;
$black: #202020;
$theme-gray-lightest: #f0f0f2;
$theme-gray-lighter: #e9e9ec;
$theme-gray-light: #cfcfd4;

// GRADIENTS
$theme-blue-gradient: linear-gradient(to top, $theme-blue, lighten($theme-blue, 15%));

$theme-green-gradient: linear-gradient(to top, $theme-green, lighten($theme-green, 15%));

$theme-yellow-gradient: linear-gradient(to top, $theme-yellow, lighten($theme-yellow, 15%));

$theme-gray-gradient: linear-gradient(to top, $theme-gray-lighter, lighten($theme-gray-lighter, 2%));

// SHADOW
$shadow: 0 6px 10px 0 rgba($black, .05), 0 1px 18px 0 rgba($black, .06), 0 3px 5px -2px rgba($black, .1);

body {
  font-family: sans-serif;
}

.container {
  margin: 1rem;
  max-width: 100%;
}

.grid {
  display: grid;
  grid-gap: $l-space;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  > div {
    padding: $l-space;
  }
}

h2 {
  text-transform: uppercase;
  letter-spacing: .05rem;
  color: $theme-gray-light;
  border-bottom: 1px solid $theme-gray-lighter;
  padding-bottom: 10px;
}

.sample {
  min-height: 200px;
}

.button {
    min-height: 50px;
    border-radius: 3px;
    border-color: transparent;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    letter-spacing: .05rem;
    padding: .75rem 2rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    min-width: 200px;
    transition: all 150ms ease;
    
    &.--original {
      font-size: 16px;
      transition: background-image 500ms cubic-bezier(.17,.67,.44,.89),background-size 500ms cubic-bezier(.17,.67,.44,.89),color 250ms cubic-bezier(.17,.67,.44,.89);
      border-radius: 0;
      text-shadow: none;
      
      &:hover {
        background-size: 100% 100%;
      }
    }
    
    &.--new {
      font-size: 14px;

      &:hover {
        transform:...

JavaScript

6