CSS : hover와 transform / transition 을 이용해 버튼 효과 만들기

버튼 효과 만들기

✅ css를 사용하면서 라이브러리만 사용하다보니 직접 만들어 보는 연습이 필요하여 작성하게 되었다.

 

 

.btn:hover{

  box-shadow: 0 5px 10px rgba(0,0,0,0.1);

  transform: translateY(-3px);

  transition: 0.5s;

}

 

1. hover는 버튼을 올렸을때 효과가 발생한다. (사용할 버튼에 hover 주기)

2. box-shadow는 버튼의 그림자 효과를 줄 수 있고 색상도 지정이 가능하다.

3. transform 에 translateY 는 폼에 위 아래 효과를 줄 수 있는데 -3px 을 할경우 위로 3px이 올라간다.

4. transition은 부드러운 효과를 주기위한건데 0.5초의 시간을 주어 부드럽게 위로 올라가며 쉐도우가 생긴다.