애니메이션
Pressable 3D Button
여러 겹의 box-shadow로 입체 벽을 만든 3D 버튼입니다. 눌리면 아래로 내려가 그림자층에 닿는 물리감을 :active transform으로 표현하며, prefers-reduced-motion 시 애니메이션 없이 반응합니다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Pressable3DButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | ReactNode | 눌러보세요 | 버튼에 표시할 라벨(텍스트 또는 노드). |
| depth | number | 6 | 입체 두께(px). 눌렸을 때 버튼이 내려가는 깊이이며 1~24로 클램프됩니다. |
| onClick | () => void | undefined | 버튼 클릭 시 호출되는 콜백. |
| className | string | undefined | 버튼에 추가할 CSS 클래스명. |