# Animated Power Button

> An interactive 3D-styled button component featuring a realistic press animation. The button uses CSS transforms and shadows to create a layered, three-dimensional appearance with a black cover plate and gray button surface. When pressed, it smoothly animates downward while the shadow disappears, simulating a physical button being pushed. Built with React and Tailwind CSS, it includes hover states and smooth transitions for an engaging user experience. Perfect for adding tactile feedback to interfaces that need a premium, interactive feel.

- Author: [M.bin Salman](https://21st.dev/@muhammad-binsalman)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@muhammad-binsalman/components/animated-power-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/muhammad-binsalman/animated-power-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt