Background Fade (배경 페이드)

반투명 오버레이가 요소에 색을 덧입혀 포인터가 올라가 있음을 보여 줍니다.

[적용할 곳]에 호버 스테이트 레이어(Hover State Layer)를 넣어 줘. 호버 스테이트(hover state), 스테이트 레이어(state layer), 호버 오버레이(hover overlay)라고도 불러.
포인터가 올라가 있는 동안 콘텐츠 색의 옅은 반투명 오버레이가 요소 위에 빠르게 나타나고, 벗어나면 사라지게 해 줘.
대비가 유지되도록 옅게 두고, 포커스와 눌림 상태에도 같은 레이어 방식을 써 줘.

마우스를 올리면 테두리 색이 서서히 나타나거나 바뀝니다.

[적용할 곳]에 보더 페이드(Border Fade) 호버 효과를 넣어 줘.
포인터가 요소 위에 있는 동안 테두리가 차분한 색에서 강조색으로 부드럽게 바뀌게 해 줘. 은은하게, 움직임이나 크기 변화 없이.
아무것도 밀리지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 색 배경이 한쪽 끝에서 요소를 가로질러 쓸고 지나갑니다.

[적용할 곳]에 배경 스윕(Background Sweep) 호버 효과를 넣어 줘. 백그라운드 필(background fill), 슬라이드 필(slide fill)이라고도 불러.
새 배경색이 왼쪽 끝에서 오른쪽 끝으로 튕김 없이 부드럽고 빠르게 쓸고 지나가고, 포인터가 벗어나면 같은 방식으로 물러나게 해 줘. 글자색은 잘 읽히도록 바뀌게 해 줘.
채움은 요소 모양 안쪽으로 잘라 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 채워진 배경이 비워지고 테두리만 남은 버튼이 됩니다.

[적용할 곳]에 할로우(Hollow) 호버 효과를 넣어 줘. 고스트 필(ghost fill)이라고도 불러.
채워진 배경이 사라지면서 테두리만 남고, 빈 배경에서도 읽히도록 라벨 색이 바뀌게 해 줘. 부드럽고 빠르게.
요소 크기가 변하지 않게 두 상태의 테두리 두께를 같게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올려 둔 동안 요소가 떠오른 뒤 위아래로 계속 둥실거립니다.

[적용할 곳]에 밥(Bob) 호버 효과를 넣어 줘. 행(hang)이라고도 불러.
요소가 살짝 떠오른 뒤, 포인터가 올라가 있는 동안 위아래로 부드럽게 계속 둥실거리고, 벗어나면 제자리로 내려오게 해 줘. 느리고 부드럽게.
둥실거림은 호버 중에만 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.