// CSS 1
/**
 * Button 02
 */
.btn--2{
  background: #232426;
  overflow: hidden;

  .btn__text{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 45px;
    transition: top $time;
  }

  &::after{
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 45px;
    background-color: $color-red;
    content: "Click!";
    transition: top $time;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
  }

  &:hover::after{ top: 0; }
  &:hover > .btn__text{ top: -100%; }
}


// HTML 1

<div>
      <span>02</span>
      <button type="button" class="btn btn--2"><span class="btn__text">Button</span></button>
    </div>