JSFiddle - React, Tailwind, and code Playground

HTML

<div class="action-buttons">
        <a class="button at_the_same_time click" href="#">Generate Forms</a>
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="10" data-slide="slide10" href="#">Sign Forms</a>   
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="11" data-slide="slide11" href="#">Completed Forms</a></div>

SCSS

$lightest-color: #ccc;

.action-buttons {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      margin-top:2.75em;
    }
    
    .button {
      position: relative;
      padding: 10px 16px;
      font-size: 18px;
      width: 20rem;
      background-color: transparent;
      color: red;
      text-align: center;
      cursor: pointer;
    }
    
    .button:before, .button:after {
      display: block;
      content: " ";
      border-top: none;
      border-right: none;
      border-bottom: none;
      border-left: none;
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      transition: opacity 200ms ease-in-out;
    }
    
    .button:before {
      top: -0.15rem;
      left: 0;
    }
    
    .button:after {
      bottom: 0;
      right: 0;
    }
    
    .button.at_the_same_time:hover:before {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-top: .5rem solid $lightest-color;
      border-right: .5rem solid $lightest-color;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
    }
    
    .button.at_the_same_time:hover:after {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-bottom: .5rem solid $lightest-color;
      border-left: .5rem solid $lightest-color;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
}

.button.at_the_same_time:active, 
 .button.at_the_same_time:focus 
 {
     border: 0.5rem solid $lightest-color;
  }