Nudge Forward / Backward (넛지 포워드 / 백워드)

마우스를 올리면 버튼 라벨이 밀려 나가고 화살표와 채움 색이 펼쳐지며 들어옵니다.

[적용할 곳]에 인터랙티브 호버 버튼(Interactive Hover Button) 효과를 넣어 줘.
라벨 옆의 작은 점이 커지면서 버튼을 가득 채우는 동안 라벨은 옆으로 밀려나며 사라지고, 화살표가 붙은 라벨이 새 채움 색 위로 밀려 들어오게 해 줘. 부드럽고 빠르게.
버튼 크기는 고정하고 라벨은 내내 읽히게 두고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

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

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

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

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

요소가 빠르게 커졌다가 톡 튕기듯 제자리로 돌아옵니다.

[적용할 곳]에 팝(Pop) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 부풀었다가 원래 크기로 돌아오게, 작게 톡 튕기는 느낌으로 해 줘.
커진 상태로 멈추거나 반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.