Radial Fill (레이디얼 필)

클릭한 지점에서 퍼져 나가는 원 안으로 새 화면이 드러납니다.

[적용할 곳]에 서큘러 리빌(Circular Reveal) 전환을 넣어 줘. 클립 패스 원 확장(clip-path circle expand), 테마 전환 리빌(theme toggle reveal)이라고도 불러.
누른 컨트롤에서 원이 바깥으로 커지며 그 안에 새 화면이 드러나 전체 영역을 덮게 해 줘. 부드럽고 일정하게, 시작과 끝은 완만하게.
원은 컨트롤을 누른 바로 그 자리에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 원 없이 바로 바뀌게 해 줘.

클릭하거나 탭한 바로 그 지점에서 둥근 물결이 퍼지며 사라집니다.

[적용할 곳]에 리플(Ripple) 효과를 넣어 줘. 머티리얼 리플(material ripple), 잉크 리플(ink ripple)이라고도 불러.
클릭하거나 탭할 때마다 누른 바로 그 지점에서 부드러운 원형 물결이 요소를 덮을 때까지 퍼지며 점점 옅어지게 해 줘. 빠르고 가볍게.
물결은 요소 모양대로 잘라 내고, 빠르게 연달아 누르면 각각 새 물결이 시작되게 하고, 키보드로 누를 때는 가운데에서 시작해 줘.

마우스를 올리면 요소 안에서 사각형이 커지거나 줄어들며 배경이 바뀝니다.

[적용할 곳]에 렉탱글 필(Rectangle Fill) 호버 효과를 넣어 줘.
안쪽 사각형이 가운데로 줄어들면서 새 배경색이 네 변에서 좁혀 들어오고, 포인터가 벗어나면 다시 열리게 해 줘. 그동안 라벨 색도 읽히도록 바꾸고, 부드럽고 빠르게.
라벨은 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

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

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