[CSS] pseudo-class hover(호버), focus(포커스), active(액티브)

우리가 버튼을 만들어 봤다고 하자

그렇게 버튼을 만들고 CSS로 버튼을 디자인 하면 예쁜 버튼을 만들 수 있다

 

하지만

 

버튼을 클릭해도 클릭하는 별 효과가 없다는 것!

그럴 때 쓸 수 있는 것이 

css의 hover, focus, active

알아보자

 

이렇게 예쁘게 만들어 놓은 버튼(button)이 있다

HTML

<button class="btn">구매하기</button>

CSS

.btn {
  padding: 15px;
  font-size: 20px;
  border: none;
  border-radius: 10px;
  background-color: coral;
  color: white;
  cursor: pointer;
}

이것을 마우스를 가져다 놓거나 클릭 했을 때 나올 수 있는 효과를 줘보자

 

hover : 커서를 가져다 놓을 때
active : 클릭 했을 때
focus : 클릭 후 유지

CSS

/* psesudo class */
/* 마우스 올렸을때 */
.btn:hover {
  background-color: chocolate;
}

/* 마우스 클릭 후 유지 */
.btn:focus {
  background-color: grey;
}

/* 마우스 클릭 할 때 */
.btn:active {
  background-color: brown;
}

효과 좋다

 

끝

 

출처 - 코딩애플