JSFiddle - React, Tailwind, and code Playground

by CreativeDreams

HTML

<div class="btn">
  Lorem ipsum 
</div>

SCSS

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  min-width: 50px;
  border: 3px solid #ccc;
  margin: 200px 0 0 300px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  /* overflow: hidden; */
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 10px; 
    height: 60px;
    z-index: -1;
    opacity: 0.5;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: all 2s;
    /* opacity: 0; */
  }
  
  &:before {
    background-color: red;
    left: 50%;
    transform-origin: left;
  }
  
  &:after {
    background-color: blue;
    right: 50%;
    transform-origin: right;

  }
  
  &:hover {
    &:before {
      width: 50%;
    }
    
    &:after {
      width: 50%;
    }
  }
}