An 8-sided button shaped with a CSS clip-path polygon. On hover, the entire shape rotates 22.5 degrees with a spring overshoot, the background gradient fills in, and the inner text counter-rotates to stay upright.
Create an octagon-shaped button using a CSS clip-path polygon with 8 vertices. clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) On hover: - The entire shape rotates 22.5 degrees with a spring overshoot transition - The background transitions from dark to a vivid gradient - An inner text span counter-rotates -22.5 degrees to stay upright No library dependencies; pure CSS transitions + React state.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.