Interactive Hover Button (인터랙티브 호버 버튼)

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

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

포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 빠져나갑니다.

[적용할 곳]에 디렉션 어웨어 호버(Direction Aware Hover) 효과를 넣어 줘. 방향 인식 오버레이(direction-aware overlay)라고도 불러.
포인터가 들어온 쪽에서 오버레이가 미끄러져 들어오고, 나가는 쪽으로 미끄러져 나가게 해 줘. 빠르고 부드럽게.
들어올 때와 나갈 때의 포인터 위치로 방향을 판단하고, 터치나 키보드 포커스에서는 정해 둔 한 방향을 써 줘.

마우스를 올리면 화살표나 요소 자체가 몇 픽셀 앞이나 뒤로 밀립니다.

[적용할 곳]에 넛지 포워드 / 백워드(Nudge Forward / Backward) 호버 효과를 넣어 줘. 애로 넛지(arrow nudge)라고도 불러.
포인터가 올라가 있는 동안 화살표가 가리키는 방향으로 살짝 밀리고, 벗어나면 돌아오게 해 줘. 빠르고 작게.
라벨이나 레이아웃은 밀지 말고 화살표만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

마우스를 올리면 텍스트 위에 선이 왼쪽·가운데·오른쪽에서 뻗어 나옵니다.

[적용할 곳]에 오버라인 그로우(Overline Grow) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 텍스트 위의 선이 가운데에서 양옆으로 뻗어 나가고, 벗어나면 다시 가운데로 줄어들게 해 줘. 빠르고 부드럽게.
텍스트가 밀리지 않게 선 자리를 미리 확보하고, 키보드 포커스에도 같은 효과를 보여 줘.