CSS 버튼에 커서 올려놓을때, 클릭할때 변화시키기

1. hover

• 마우스를 올려놓을 때 색 변화

.btn:hover {
  background : chocolate;
  }

 

 

2. focus

• 클릭 후 계속 포커스 상태일때 색 변화
  • 포커스 상태란 : 클릭 이후 다른 곳을 클릭 하지 않고 있는 상태

.btn:focus {
  background : red;
  }

 

 

3. active

• 클릭이 진행 중인 상태일때 색 변화

.btn:active {
  background : brown;
}

 

4. 그외

:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing /*동영상, 음성이 재생중일 때*/
:paused /*동영상, 음성이 정지시*/
:autofill /*input의 자동채우기 스타일*/
:disabled /*disabled된 요소 스타일*/
:checked /*체크박스나 라디오버튼 체크되었을 때*/
:blank /*input이 비었을 때*/
:valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required /*필수로 입력해야할 input의 스타일*/
:nth-child(n) /*n번째 자식 선택*/
:first-child /*첫째 자식 선택*/
:last-child /*마지막 자식 선택*/

 

 

5. input에도 적용이 됩니다.

input:focus {
  border : 2px solid red;
}