A lightweight yet impressive CSS/JS button animation system with dynamic color customization. This project demonstrates how to create engaging UI elements with minimal code.
- 3D perspective hover animations with smooth transitions
- Dynamic color customization via HTML data attributes
- Elegant shine effect that sweeps across buttons
- Anti-jitter technology for seamless interaction
- Cross-browser compatible design
The buttons feature a satisfying tilt effect, subtle scaling, and customizable glow effects that match each button's unique color scheme. Simply add your desired color values as data attributes and the system automatically generates the appropriate animations and effects.
Perfect for designers and developers looking to add that extra touch of interactivity to forms, landing pages, or call-to-action elements without the bloat of animation libraries.
# Clone the repository
git clone https://github.com/casparml/Magical-Button-Hover-Effect.git
# Navigate to the project directory
cd Magical-Button-Hover-Effect
# Open index.html in your browser or use a live server<button class="magic-btn" data-color="#5e60ce" data-color2="#4ea8de">Hover Me</button>| Option | Description | Default |
|---|---|---|
data-color |
Primary button color | #5e60ce |
data-color2 |
Secondary gradient color | #4ea8de |
data-intensity |
Hover effect intensity | 0.8 |
data-shine |
Enable/disable shine effect | true |
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 16+
- For best performance on mobile devices, use the lightweight version
- Reduce animation intensity on pages with multiple buttons
- Consider using the static fallback for very old browsers
Check out the live demo to see the buttons in action.
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
Minimal code. Maximum impact.