SOURCE

<div class="anniu">Aurora Borealis night</div>

.anniu,.anniu::after{
    font-family: 'Do Hyeon', sans-serif;
    width: 260px;
    height: 80px;
    text-align: center;
    font-size: 22px;
    line-height: 80px;
    color: rgb(255, 251, 251);
    background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
    box-shadow: 5px 0 0 rgb(0, 204, 255);
    cursor: pointer;
    position: relative;
}

.anniu::after{
    content: 'Aurora Borealis night';
    position: absolute;
    top: 0;
    left: 0;
    text-shadow: -5px -2px 0 rgb(0, 183, 255),
    5px 2px 0 rgb(0, 255, 115) ;
    visibility: hidden;
} 

.anniu:hover::after{
    animation: san 1s ; 
    animation-timing-function: steps(1, end);
}

@keyframes san{
    0%{
        clip-path: inset(20% -5px  60%  0);
        transform: translate(-6px,5px);
        visibility: visible;
    }
    10%{
        clip-path: inset(50% -5px  30%  0);
        transform: translate(6px,-5px);
    }
    20%{
        clip-path: inset(20% -5px  60%  0);
        transform: translate(5px,0px);
    }
    30%{
        clip-path: inset(80% -5px  5%  0);
        transform: translate(-8px,5px);
    }
    40%{
        clip-path: inset(0 -5px  80%  0);
        transform: translate(-4px,-3px);
    }
    50%{
        clip-path: inset(50% -5px  30%  0);
        transform: translate(-6px,-5px);
    }
    60%{
        clip-path: inset(80% -5px  5%  0);
        transform: translate(-7px,5px);
    }
    70%{
        clip-path: inset(0 -5px  80%  0);
        transform: translate(3px,6px);
    }
    80%{
        clip-path: inset(50% -5px  30%  0);
        transform: translate(5px,5px);
    }
    90%{
        clip-path: inset(20% -5px  60%  0);
        transform: translate(6px,-5px);
    }
    100%{
        clip-path: inset(0 -5px  80%  0);
        transform: translate(1px,5px);
    }
}