[HTML/CSS] 버튼 마우스 오버, 클릭 시 배경색 변경하기

 

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다.

[HTML/CSS] 버튼 배경색 지정하기

그런데, 위 포스팅과 같이 배경색만 변경하면,

마우스 오버, 클릭 등의 액션이 발생해도 배경색이 그대로여서

마치 누를 수 없는 버튼처럼 느껴집니다.

 

이번에는 버튼에 마우스 오버, 클릭 등의 액션이 일어날 경우

버튼의 배경색을 변경하는 방법을 정리해보겠습니다.

 

  :hovor  

마우스를 버튼에 올렸을 때, 지정한 스타일이 적용됩니다.

 

  :focus  

버튼에 마우스가 올려지거나, Tab 키 등을 이용하여 버튼에 포커스가 간 경우에,

지정한 스타일이 적용됩니다.

 

  :active  

버튼을 마우스로 클릭하고, 클릭을 해제 할 때까지, 지정한 스타일이 적용됩니다.

 

 

  예제  

<button class='skyblue_btn'>버튼</button>

.skyblue_btn {
  background-color: skyblue;
}

.skyblue_btn:hover {
  background-color: orange;
}

.skyblue_btn:focus {
  box-shadow: 0 0 0 3px purple;
}

.skyblue_btn:active {
  background-color: red;
}

 

.skyblue_btn {

   background-color: skyblue;

}

버튼의 기본 배경색이 하늘색(skyblue)으로 지정되었습니다.

 

.skyblue_btn:hover {

    background-color: orange;

}

버튼에 마우스 커서가 올라가면, 배경색을 오렌지(orange)색으로 변경합니다.

 

.skyblue_btn:focus {

    box-shadow: 0 0 0 3px purple;

}

버튼에 포커스가 이동되면, 보라색 테두리가 생성됩니다.

 

.skyblue_btn:active {

   background-color: red;

}

마우스로 버튼을 클릭해서 클릭을 해제 할 때까지

버튼의 색깔이 빨간색으로 변경됩니다.