Beautiful buttons with minimal classes. Most buttons are styled automatically!
Regular <button> elements are automatically styled.
<button>Default Button</button>
<button disabled>Disabled</button>Add .gradient for a vibrant purple-to-pink gradient.
<button class="gradient">Gradient Button</button>
<button class="gradient glow">Gradient + Glow</button>Add .outline for a bordered style.
<button class="outline">Outline</button>
<button class="outline primary">Primary</button>Add .ghost for minimal, transparent buttons.
<button class="ghost">Ghost Button</button>Use .sm, .lg, or .xl for different sizes.
<button class="sm">Small</button>
<button class="lg">Large</button>Add .loading to show a spinner.
<button class="loading">Saving...</button>Use .bg-* classes for solid color backgrounds.
<button class="bg-primary">Primary</button>
<button class="bg-success">Success</button>Mix and match for unique button styles.
<button class="gradient lg glow">Custom</button>