JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<a class="btn-riot" href="#">
    <div class="btn-riot--inner"></div>
    <div class="btn-riot--wrap">
      CLICK HERE <span class="icon">:)</span>
    </div>
</a>

SCSS

$color-gold-1: #F0E6D2;
$color-gold-2: #CDBE91;
$color-gold-3: #CBAA6E;
$color-gold-4: #C89B3C;
$color-gold-5: #785A28;
$color-gold-6: #463714;
$color-gold-7: #32281E;

body{
  background: #1a1a1a;
  font-family: Sans-Serif;
}

.btn-riot {
    position: relative;
    background: linear-gradient(to bottom, $color-gold-3, $color-gold-6);
    opacity: 1;
    padding: 4px;
    float: left;
    color: $color-gold-1;
    text-decoration: none;
    transition: color .2s ease-in-out;
    
    &:hover{
      color: $color-gold-3;
      .btn-riot--inner {
          opacity: 1;
      }
    }
    .btn-riot--inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, $color-gold-3, $color-gold-4);
        opacity: 0;
        transition: opacity .2s ease-in-out;
    }
    .btn-riot--wrap {
        position: relative;
        width: auto;
        font-size: 1.5em;
        line-height: 1.5em;
        padding: 10px 15px;
        background: $color-gold-7;
        text-align: center;
        .icon {
          margin-left: 20px;
        }
    }
}