Hollow (할로우)

마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.

[적용할 곳]에 배경 페이드(Background Fade) 호버 효과를 넣어 줘. 컬러 페이드(color fade)라고도 불러.
포인터가 요소 위에 있는 동안 배경색과 글자색이 새 색으로 부드럽게 바뀌고, 벗어나면 원래대로 돌아오게 해 줘. 차분하게, 움직임 없이.
두 상태 모두 글자와 배경의 대비를 충분히 유지하고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 요소 가장자리 안쪽에 안쪽 테두리 선이 나타납니다.

[적용할 곳]에 트림(Trim) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소 가장자리 바로 안쪽에 가는 선이 서서히 나타나고, 벗어나면 서서히 사라지게 해 줘. 은은하게, 움직임 없이.
선은 요소 안쪽에 두어 크기가 바뀌지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

그라디언트 테두리가 요소 둘레를 따라 움직이고, 포인터를 올리면 퍼져 나갑니다.

[적용할 곳]에 호버 보더 그라디언트(Hover Border Gradient) 효과를 넣어 줘.
짧은 그라디언트 하이라이트가 테두리 한쪽에 머물러 있다가, 포인터가 올라가 있는 동안 테두리를 따라 일정하게 돌고 테두리 전체가 은은하게 빛나며 밝아지게 해 줘.
호버 중에만 테두리를 움직이고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

마우스를 올리면 요소 아래에 부드러운 그림자가 생기거나 짙어져 떠오른 느낌을 줍니다.

[적용할 곳]에 호버 섀도(Hover Shadow) 효과를 넣어 줘. 드롭 섀도 온 호버(drop shadow on hover), 엘리베이션 온 호버(elevation on hover)라고도 불러.
포인터가 올라가 있는 동안 요소 아래의 부드러운 그림자가 짙어지고 퍼져서 떠 보이게 하고, 벗어나면 다시 옅어지게 해 줘. 요소 자체는 제자리에 두고.
라이트·다크 테마 모두에서 어울리도록 그림자는 은은하게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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