JSFiddle - React, Tailwind, and code Playground

by Solow

HTML

<div class="container">
  <button class="btn">Order</button>
</div>

SCSS

.container {
  min-height: 200px;
  padding: 50px;
}

    .btn {
      position: relative;
      border: 0;
      padding: 15px 20px;
      background-color: lightgrey;
      cursor: pointer;
      color: white;
      z-index: 0;
    
      &:hover::before {
        width: 100%;
      }
    
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: dimgrey;
        transition: .5s;
      }
    }