transition과 transform 을 이용한 버튼

button {

    background: none;

    color: #ffa260;

    border: 2px solid;

    padding: 1em 2em;

    font-size: 1em;

    transition: all 0.2s linear;

}

 

위 내용으로 만든 버튼을 hover 했을때 hover한 내용이 linear 타이밍으로 all 요소가 0.2s동안 움직인다.

button:hover {

    border-color: #f1ff5c;

    color: white;

    box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;

    transform: translateY(-0.25em);

    cursor: pointer;

}

transfrom: translate Y로 인해 hover시 button이 -0.25em 만큼 이동하고 cursor가 일반에서 pointer (손가락)으로 변한다.