JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div class="sample">
    <h2>Original</h2>
    <div class="grid">
      <div><button class="button --old --original --bare">bare</button></div>
      <div><button class="button --old --original --primary">primary</button></div>
      <div><button class="button --old --original --secondary">secondary</button></div>
      <div><button class="button --old --original --action">action</button></div>
      <div><button class="button --old --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

$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;
  text-align: center;
}

.button {
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-size: $l-space;
    font-weight: 600;
    letter-spacing: .05rem;
    padding: .75rem 2rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    min-width: 200px;
    transition: all 300ms ease;
    text-shadow: 0 1px 1px rgba($black, .10);
    
    &.--original {
      border-radius: 0;     
      background-image: linear-gradient(to left,#202020,#202020);
      background-repeat: no-repeat;
      background-size: 0 100%;
      
      &:hover {
        background-image: linear-gradient(to right,#202020,#202020);
        background-size: 100% 100%;
        color: #fff;
      }
    }
    
    &.--new {
      &:hover {
        transform: translateY(-2px) scale(1.005);
        box-shadow: $shadow;
      }

      &:focus,
      &:active {
        transform: translateY(0) scale(1);
       ...

JavaScript

6