CSS button hover/active

웹 페이지 버튼

페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다.

 

hover 

button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데

button 위에 mouse를 올려 두면 hover 효과가 나타난다

 

.button {

background-color : white - 처음 기본 색깔이 흰색이지만

 &:hover {

 background-color : red - 마우스를 올려두면 빨강색으로 변함

 }

}

 

active

button을 사용자가 눌렀을 때 나타내는 상태가 active 입니다. 일반적으로 시각적인 피드백을 제공하기 위해서나 스타일을 변경하여 상호작용이 있음을 보여주기 위해서 사용 된다.

 

.button {

 background-image : url("button.png")

 background-position: center top

}

.button:active {

 background-position : center bottom; / 버튼이 눌렸을 때 배경 이미지를 아래쪽으로 이동

}