A parallelogram-shaped button using clip-path. On hover, a gradient fill sweeps in from the left with a skewed transform, while the text colour transitions to white. The clip-path outline remains visible at all times.
Create a parallelogram-shaped button using clip-path. Shape: clip-path polygon cutting ~10% off the left-top and right-bottom corners. On hover: - A gradient fill layer sweeps in from the left using scaleX(0→1) with skewX transform - Text colour transitions to white - The parallelogram border outline remains visible at all times No library dependencies; pure CSS transitions + React state.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.