Rectangle Fill (렉탱글 필)

포인터를 올리면 배경이 가운데나 가장자리에서 셔터처럼 열리거나 닫힙니다.

[적용할 곳]에 셔터 필(Shutter Fill) 호버 효과를 넣어 줘. 셔터(shutter)라고도 불러.
새 배경색이 가운데 세로선에서 양옆으로 셔터처럼 열리고, 포인터가 벗어나면 다시 가운데로 닫히게 해 줘. 그동안 글자색은 읽기 좋게 바뀌어야 해. 부드럽고 빠르게.
채우기는 요소 안쪽에서만 보이게 잘라 주고 글자는 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 색이 있는 원이 가운데에서 커지거나 가운데로 줄어들며 요소를 채웁니다.

[적용할 곳]에 레이디얼 필(Radial Fill) 호버 효과를 넣어 줘. 서클 익스팬드(circle expand)라고도 불러.
새 색의 원이 가운데에서 부드럽게 커져 요소를 가득 채우고, 포인터가 벗어나면 다시 가운데로 줄어들게 해 줘. 그동안 라벨 색도 읽히도록 바꿔 주고.
원은 요소 모양 안으로 잘라 넣고 라벨은 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

색 배경이 한쪽 끝에서 쓸려 들어오며 탄력 있게 살짝 넘쳤다가 자리 잡습니다.

[적용할 곳]에 배경 바운스 스윕(Background Bounce Sweep) 호버 효과를 넣어 줘.
새 배경색이 한쪽 끝에서 쓸려 들어와 반대쪽 끝을 탄력 있게 살짝 넘었다가 자리 잡고, 글자색은 잘 읽히도록 바뀌게 해 줘. 포인터가 벗어나면 부드럽게 다시 빠져나가게 해 줘.
글자는 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 요소가 몇 도 정도 회전합니다.

[적용할 곳]에 로테이트(Rotate) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소가 시계 방향으로 살짝 돌고, 벗어나면 돌아오게 해 줘. 부드럽고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 요소의 모서리가 부드럽게 둥글어집니다.

[적용할 곳]에 라운드 코너(Round Corners) 호버 효과를 넣어 줘.
포인터가 올라가 있는 동안 요소의 각진 모서리가 부드럽게 둥글어지고, 벗어나면 다시 각지게 해 줘. 부드럽고 빠르게.
요소 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.

[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.