Hover Shadow (호버 섀도)

마우스를 올리면 요소가 떠오르듯 몇 픽셀 위로 올라갑니다.

[적용할 곳]에 플로트(Float) 호버 효과를 넣어 줘. 리프트(lift), 레이즈(raise)라고도 불러.
포인터가 올라가 있는 동안 요소가 살짝 떠올라 있다가, 벗어나면 제자리로 내려오게 해 줘. 부드럽고 은은하게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

포인터를 올리면 요소가 몇 픽셀 아래로 내려가 페이지 안으로 눌린 듯 보입니다.

[적용할 곳]에 싱크(Sink) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 살짝 내려가 그대로 머물러 페이지 안으로 눌린 듯 보이고, 벗어나면 다시 올라오게 해 줘. 부드럽게, 튕김 없이.
주변 레이아웃은 밀지 말고 보이는 위치만 옮기고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

아이콘이 버튼 밖으로 떠올라 사라지고, 새 아이콘이 둥실 떠오르며 들어옵니다.

[적용할 곳]에 아이콘 플로트 어웨이(Icon Float Away) 호버 효과를 넣어 줘.
지금 아이콘은 위로 떠오르며 사라지고, 새 아이콘이 아래에서 떠올라 그 자리에 들어오게 부드럽게 바꿔 줘. 포인터가 벗어나면 반대로 되돌리고.
바뀌는 동안 버튼 크기는 고정하고, 키보드 포커스에도 같은 효과를 보여 줘.