[CSS] button animation

<style>
.btn {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    border: 1px #3399dd solid;
    ;
    margin: 15px auto;
    background-color: #66aaff;
    text-align: center;
    cursor: pointer;
    color: #333;
    transition: all 0.9s, color 0.3s;
}

.btn:hover {
    color: #fff;
}

.hover1:hover {
    box-shadow: 200px 0 0 0 rgba(0, 0, 0, 0.5) inset;
}

.hover2:hover {
    box-shadow: -200px 0 0 0 rgba(0, 0, 0, 0.5) inset;
}

.hover3:hover {
    box-shadow: 0 80px 0 0 
    rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 0, 0, 0.25) inset;
}

.hover4:hover {
    box-shadow: 200px 0 0 0 rgba(0, 0, 0, 0.25) inset, -200px 0 0 0 rgba(0, 0, 0, 0.25) inset;
}
</style>
<div>
    <button class="btn hover1"> BUTTON 1 </button> <button class="btn hover2"> BUTTON 2 </button> <button class="btn hover3"> BUTTON 3 </button> <button class="btn hover4"> BUTTON 4 </button>
</div>

https://blog.stories.pe.kr/176

CSS로 그럴듯한 버튼효과를 내보자