Cool Button

About this Component Cool button creates a visually striking 3D button where the top face appears to sit on a raised base with a deep shadow.

About this Component 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. Key Features 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.