Outline Expand (아웃라인 익스팬드)

마우스를 올리면 동심원 테두리 고리가 요소에서 바깥으로 퍼지거나 안쪽으로 모입니다.

[적용할 곳]에 보더 리플(Border Ripple) 호버 효과를 넣어 줘.
포인터가 들어오면 테두리 고리 두어 개가 차례로 요소에서 바깥으로 퍼지며 사라지게 해 줘. 물결처럼 빠르고 가볍게.
반복하지 말고 호버할 때마다 한 번만 재생하고, 고리 때문에 주변 레이아웃이 밀리지 않게 해 줘.

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

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

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

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

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

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

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

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

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

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

요소가 안쪽으로 눌렸다가 돌아와, 실제 버튼을 누른 것 같은 느낌을 줍니다.

[적용할 곳]에 푸시(Push) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 작아졌다가 탄력 있게 원래 크기로 돌아오게, 실제 버튼을 눌러 넣은 것처럼 해 줘.
반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.