Background Effect with Sound Button
A button with an animated background fill from any direction and a sound effect on click. Perfect for interactive, modern UIs.
Demo
Interactive Demo
Hover to see the animated background fill. Click to play a sound.
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Add the following interface to your types file for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the BackgroundEffectwithSound component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | The button label or content. |
className | string | "" | Additional CSS classes to style the button. |
onClick | () => void | undefined | Click handler executed after the sound plays. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | HTML button type attribute. |
direction | "left" | "right" | "top" | "bottom" | "left" | Direction from which the background fill animates in. |
soundUrl | string | "/sound.mp3" | URL of the sound file to play on click. |
Features
- Animated background fill from any direction on hover
- Plays a sound effect on click
- Customizable fill direction and sound
- Framer Motion-powered transitions
- TypeScript support
- Accessible and production-ready
- Customizable label and style
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)