JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<a class="btn" href="#"><span></span><span></span><span></span><span></span>Morbi leo risus</a>

SCSS

.btn {
  position: relative;
  top: 100px;
  left: 50px;
}


$brand-green: green;

@mixin buttonColor($color: #fff) {
    color: $color;
    border-bottom-color: $color;
}


.btn {
    transition: all 300ms ease;
    transition-delay: 300ms;

    position: relative;
    padding: 10px 0;
    border-radius: 0;
    border-bottom: 2px solid;

    @include buttonColor($brand-green);

    &.btn-green {
        @include buttonColor($brand-green);
    }

    &.btn-white {
        @include buttonColor(#fff);
    }
    
    
    
   
     > span {
      
     
          display: block;
          position: absolute;         
     
          &:nth-child(1),&:nth-child(2) {
            bottom: 0;
            width: 2px;  
            height:0;
            background: red;
            
            transition: height 300ms ease;
            transition-delay: 300ms;
          }

           &:nth-child(3), &:nth-child(4) {
            width: 0;  
            height: 2px;
            top: 0;
            background:blue;
            
            transition: width 300ms ease;
            transition-delay: 0ms;
          }

          &:nth-child(1) {
             left: 0; 
          }
          &:nth-child(2) {
            right: 0;
          }
          &:nth-child(3) {
            left: 0;
          }
          &:nth-child(4) {
            right: 0;
          }
      }
   &:hover {
     
      padding: 10px 15px;   
      transition-delay: 0;
  
      > span {

          &:nth-child(1),&:nth-child(2) {
            height: 100%;       
                        transition-delay: 0;
          }

           &:nth-child(3), &:nth-child(4) {
              width: 50%;  
              transition-delay: 500ms !important;
          }       
      }
   }
   
}