<button class="button">Как это работает?</button>

body { background: #111111; margin: 50px; }

.button {
  $self: &;

  position: relative;
  border: 0;
  background: none;
  color: #ffffff;
  padding: 24px 48px;
  cursor: pointer;
  perspective: 250px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    border-radius: 8px;
    border: 2px solid blue;
    transform-style: preserve-3d;
    transform-origin: 0% 100%;
    transform: scaleX(1.5) rotateY(40deg);
    -webkit-mask-image: linear-gradient(90deg, rgba(0 0 0) 50%, rgba(0 0 0 / .5) 100%);
    mask-image: linear-gradient(90deg, rgba(0 0 0) 50%, rgba(0 0 0 / .5) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition-property: transform, transform-origin, mask-size, background;
    transition-duration: .3s;
    
    @at-root #{$self}:hover::before {
      background: blue;
      -webkit-mask-size: 200% 100%;
      mask-size: 200% 100%;
      transform-origin: 50% 50%;
      transform: scaleX(1.1) rotateY(-10deg);
    }
  }
}