A diamond-shaped button using a 45-degree rotated wrapper with counter-rotated text. On hover, the button scales up, the background gradient brightens, and a pulse box-shadow animation radiates outward. No clip-path — pure CSS rotate transform.
Create a diamond-shaped button using a 45-degree CSS rotation. Structure: outer div rotated 45deg, inner button with text counter-rotated -45deg. On hover: - Outer div scales up with spring cubic-bezier - Button background transitions to a vivid gradient - A pulse box-shadow keyframe animation radiates outward Disable the pulse animation under prefers-reduced-motion. No clip-path needed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.