Vybe Sync
Tools
Color ContrastDesign Spy
Animations
ButtonsCards
InputsLoaders
TogglesCheckbox
Radio
Resources
Chrome ExtensionFigma Plugin
Company
BlogAbout Us
← Buttons

Diamond

No library Beginner

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.

LLM Prompt
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.

Vybe Sync

Tools

  • Contrast Checker
  • Design Spy

Resources

  • Chrome Extension
  • Figma Plugin

Animations

  • Components
  • Inspiration

Company

  • Blog
  • About Us

© 2026 VybeSync

Terms of UsePrivacy Policy