JSFiddle - React, Tailwind, and code Playground

by Aashish Manandhar

HTML

<div class="btn">
   <div class="btn-text">HOVER OVER ME</div>
</div>

SCSS

body {
    background: white;
    margin: 0;
    height: 100vh;
    display: grid;
    justify-items: center;
    align-items:center;    
}
.btn {
  position: relative;
  background: #2196F3;
  border-radius: 2px;
  text-align: center;
  color: white;
  z-index: 0;
  padding: 8px 32px;
  overflow: hidden;
  &:before {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1976D2;
    opacity: 0.4;
    height: inherit;
    padding: 18px 0;
    -webkit-clip-path: circle(0% at 50% 50%);
    transition: all .5s ease-in-out;
  }
  &:hover {
    &:before {
      opacity: 1;
      -webkit-clip-path: circle(100%);
    }
 }
  .btn-text {
    position: relative;
   }
}