CSS 버튼 그림자 애니메이션 예제

 

3번째 버튼에 마우스를 올렸을 때 부드럽게 그림자가 진해진다.

 

<ul class="navigation">

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

</ul>

 

.navigation {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}

 

.item {

    border-radius: 50%;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1);

    display: flex;

    height: 50px;

    width: 50px;

    cursor: pointer; /* 마우스 포인터를 올렸을 때 손가락으로 바뀜 */

    transition: box-shadow 0.1s linear;

}

 

.item:hover {

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 4px rgba(0, 0, 0, 0.2);

}