A flat-top hexagonal button using clip-path: polygon(). On hover, a circular sky-blue fill expands from the center with a spring overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)), inverting the text color from sky to navy. The hex clip-path is applied to the button element itself. No dependencies.
Goal: Create a "Hexagon" button animation.
Visual behavior: A flat-top hexagon-shaped button (like a skill or ability icon in an RPG/strategy game). On hover, a circular fill expands from the center with a spring overshoot effect, flooding the hex shape with a sky-blue gradient, while the text color inverts from sky-blue to dark navy. On mouseleave, the fill collapses back.
Technique: Apply clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) directly to the button element (which also clips overflow). Use overflow: hidden. Inside, three spans: (1) a dark base background layer (position: absolute, inset: 0), (2) a circular fill layer (position: absolute, inset: 0, border-radius: 50%, transform: scale(0) or scale(1) depending on hover, transition uses cubic-bezier(0.34, 1.56, 0.64, 1) for spring overshoot), (3) the label text (position: relative, z-index: 1). Text color transitions via React useState on hover. Add enough horizontal padding so text fits within the hex shape.
Accessibility: Under prefers-reduced-motion, replace the scale spring with a simple opacity fade on the fill layer.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.