Hover Border Gradient (호버 보더 그라디언트)

밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.

[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.

마우스를 올리면 요소 둘레에 색 빛 번짐이 나타납니다.

[적용할 곳]에 글로우(Glow) 호버 효과를 넣어 줘. 네온 글로우(neon glow)라고도 불러.
포인터가 올라가 있는 동안 요소 둘레에 부드러운 색 빛 번짐이 서서히 나타나고, 벗어나면 사라지게 해 줘. 은은하게, 움직임 없이.
빛 번짐이 레이아웃에 영향을 주지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 외곽선이 요소에서 바깥으로 퍼지거나 요소 쪽으로 좁혀집니다.

[적용할 곳]에 아웃라인 익스팬드(Outline Expand) 호버 효과를 넣어 줘.
외곽선이 요소 가장자리에 딱 붙은 채로 시작해 바깥으로 벌어지며 둘레에 작은 틈을 만들고, 호버 중에는 그대로 있다가 포인터가 벗어나면 다시 좁혀지게 해 줘. 부드럽고 빠르게.
요소 크기를 바꾸거나 주변 콘텐츠를 밀지 않는 방식으로 외곽선을 그리고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

마우스를 올리면 아이콘이 아래로 떨어져 사라졌다가 위에서 다시 내려옵니다.

[적용할 곳]에 아이콘 드롭(Icon Drop) 호버 효과를 넣어 줘.
요소 안의 아이콘이 아래로 떨어져 사라졌다가 위에서 제자리로 다시 떨어지게 해 줘. 빠르게, 착지는 부드럽게.
반복하지 말고 포인터가 들어올 때마다 한 번만 재생하고, 라벨과 버튼 크기는 그대로 둬 줘.