Styled-component로 React 버튼 눌렀을 때 효과주기

 

 

✔️ 필요성

react에서 버튼을 만들었으면 버튼을 눌렀을 때 잠깐 깜빡인다든지 해서 버튼을 누른 것 같은 UI를 만들어야 한다

const Button = styled.button`
  width: 92px;
  height: 52px;
  margin-left: 8px;
  border-radius: 4px;
  border: 0px;
  text-align: center;
  background-color: ${({ theme }) => theme.colors.grayEa};
`;

 

 

✔️ 문제 해결

:active에서 opacity를 낮춰서 눌렀을 때 깜빡이는 효과를 주고, 마우스 커서를 올려두었을 때 커서 이미지가 바뀌는 효과도 함께 부여하자

const Button = styled.button`
  width: 92px;
  height: 52px;
  margin-left: 8px;
  border-radius: 4px;
  border: 0px;
  text-align: center;
  background-color: ${({ theme }) => theme.colors.grayEa};

  &:active {
    opacity: 0.3;
  }
`;