[CSS] transition을 사용하여 커서를 올려놓았을 때 색상 서서히 변경하기

웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다.

 

이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다.

간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다.

const Home = () => {
  return (
      <Btn>GET</Btn>
  );
};

const Btn = styled.button`
  all: unset;
  margin-bottom: 20px;
  border: 1px solid black;
  border-radius: 8px;
  padding: 8px 16px;
  background-color: pink;
`;

이제 이 버튼에 커서를 올려놓았을 때 이벤트가 동작하도록 해야하므로 hover 이벤트를 추가해야한다.

 

SMALL

 

const Btn = styled.button`
  all: unset;
  margin-bottom: 20px;
  border: 1px solid black;
  border-radius: 8px;
  padding: 8px 16px;
  background-color: pink;
  &:hover {
    cursor: pointer;
    background-color: beige;
    transition: 0.5s all ease-in-out;
  }
`;

커서를 올려놓았을 때 커서 모양, 배경색이 바뀌도록 했고, 이때 transition을 사용하여 0.5초에 걸쳐 바뀌도록 구현했다. 결과를 확인해보면 약간 이상하다. 커서에 올려놓을 때는 잘 작동하지만, 커서를 버튼 밖으로 이동시키면 바로 색이 바뀐다. 아래와 같이 말이다.

 

이를 해결하기 위해서는 hover 밖에도 transition을 똑같이 써주면 된다.

const Btn = styled.button`
  all: unset;
  margin-bottom: 20px;
  border: 1px solid black;
  border-radius: 8px;
  padding: 8px 16px;
  background-color: pink;
  transition: 0.5s all ease-in-out;
  &:hover {
    cursor: pointer;
    background-color: beige;
    transition: 0.5s all ease-in-out;
  }
`;