A realistic 3D button component built with HTML, CSS, and SVG that simulates the feel of pressing a physical button. The button features smooth animations, customizable colors, and responsive interactions.
Created by @BalintFerenczy
Inspired by the amazing work at Resend
- Realistic 3D appearance using layered SVG graphics
- Smooth animations with custom easing functions
- Interactive states - hover and press effects
- Customizable colors through CSS variables
- Responsive design that scales with container size
The button responds to user interactions with three distinct states:
- Normal: The button in its resting position
- Hover: Subtle downward movement when mouse hovers over
- Active: Significant downward movement when pressed/clicked
The button can be easily customized using CSS custom properties:
.frame {
/* Button dimensions */
width: 400px;
height: 400px;
/* Movement distances */
--hover-travel: 3px;
--press-travel: 40px;
/* Color customization */
--color: black;
--brightness: 1;
--blend-mode: color;
/* Transition settings */
--transition-duration: 0.4s;
--transition-easing: ease-in-out;
}Simply modify the text content:
<p class="text">Click Me!</p>Adjust the frame dimensions:
.frame {
width: 200px;
height: 200px;
}This project is open source and available under the MIT License.
Feel free to fork this project and submit pull requests for improvements or new features!
Created by @BalintFerenczy