Hover State Layer (호버 스테이트 레이어)

마우스를 올리면 배경색과 글자색이 새 색으로 부드럽게 바뀝니다.

[적용할 곳]에 배경 페이드(Background Fade) 호버 효과를 넣어 줘. 컬러 페이드(color fade)라고도 불러.
포인터가 요소 위에 있는 동안 배경색과 글자색이 새 색으로 부드럽게 바뀌고, 벗어나면 원래대로 돌아오게 해 줘. 차분하게, 움직임 없이.
두 상태 모두 글자와 배경의 대비를 충분히 유지하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

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

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

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

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

버튼에 마우스를 올리면 안의 아이콘이 한 바퀴 돕니다.

[적용할 곳]에 아이콘 스핀(Icon Spin) 호버 효과를 넣어 줘.
포인터가 들어오면 요소 안의 아이콘이 부드럽게 한 바퀴 돌고, 벗어나면 반대로 돌아오게 해 줘.
버튼 전체가 아니라 아이콘만 돌리고, 키보드 포커스에도 같은 효과를 보여 줘.