[CSS] :active를 활용해 버튼 누르는 효과 내기

See the Pen Calculator by kIMJUHYE (@JOOOOOHYE) on CodePen.

 

 

 

 

active, hover

---

:active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 

즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.

 

:hover 은 사용자가 마우스를 요소 위에 올리는 시점을 의미한다.

 

버튼을 클릭했을 때 누르는 듯한 효과를 내고싶었기 때문에 :active를 사용했고, CSS파일에서 button부분을 두 가지 상태로 구분했다.

그냥 button 부분은 평상시 상태를, button:active 부분은 마우스를 누른 순간부터 떼는 순간까지의 상태를 의미한다.

 

마우스를 누른 순간 box-shadow라는 그림자효과를 조절하는 식으로 누르는 듯한 효과를 내봤다.

위의 그림처럼 그림자의 크기가 줄어들면, 마치 버튼을 누른 것 처럼 보인다.

그리고 버튼의 위치를 동시에 살짝 내려주면 더 생동감이 생긴다.

위치를 이동시키는 부분은 position과 top을 통해 위치를 2px정도 아래로 내림으로써 구현했다.

 

.clear__and__enter > button {
  border-radius: 25px;
  width: 104px;
  height: 40px;
  background-color: #eee;
  cursor: pointer;
  outline: none;
  box-shadow: 1px 4px 0 rgb(0,0,0,0.5);
}

.clear__and__enter > button:active {
  box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
  position: relative;
  top:2px;
}

 

(왼) 버튼 누르기 전 , (오) 버튼 누른 후