Cool Button
Cool button creates a visually striking 3D button where the top face appears to sit on a raised base with a deep shadow. The component uses Framer Motion to animate vertical depth and a sliding shine bar, giving each interaction a satisfying, arcade-style feel.
Layered 3D depth: Uses separate shadow, middle, and top layers with offsets and outlines to build a convincing stacked 3D effect that reads clearly even on darker layouts.
Press animation: The top layer animates down by several pixels on pointer/tap events, visually “meeting” the middle layer to reinforce the sense of physical press feedback.
Shine highlight: A skewed translucent strip sweeps across the button face on press, adding a dynamic specular highlight that emphasizes motion and gloss.
Typography controls: Integrated Font control exposes family, size, weight, line height, letter spacing, and alignment.
Color customization: Separate controls for top, middle, shadow, outline, and text colors let the button adapt to bright, dark, or branded palettes while preserving the 3D structure.
Link + events: Supports an optional URL with new-tab toggle and an on top event handler, making it suitable for navigation, primary CTAs, or analytics-tracked interactions.
Rayan Yasser
