Getting Started

Buttons

Primary

<button className="px-5 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">Primary</button>

Success

<button className="px-5 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">Success</button>

Danger

<button className="px-5 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Danger</button>

Outline

<button className="px-5 py-2 border border-gray-500 text-gray-700 rounded-lg hover:bg-gray-100 transition">Outline</button>

Gradient

<button className="px-5 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition">Gradient</button>

3D Press

<button className="px-5 py-2 bg-indigo-500 text-white rounded-lg shadow-md active:translate-y-1 transition">3D Press</button>

Pulse Effect

<button className="px-5 py-2 bg-pink-500 text-white rounded-lg animate-pulse hover:animate-none transition">Pulse</button>

Shadow Hover

<button className="px-5 py-2 bg-teal-500 text-white rounded-lg shadow hover:shadow-xl transition">Shadow Hover</button>

Rotate On Hover

<button className="px-5 py-2 bg-orange-500 text-white rounded-lg transform hover:rotate-3 transition">Rotate</button>

Bouncing Button

<button className="px-5 py-2 bg-pink-500 text-white rounded-lg animate-bounce">Bounce</button>

Wiggle Button

<button className="px-5 py-2 bg-green-500 text-white rounded-lg hover:animate-[wiggle_1s_ease-in-out_infinite]">Wiggle</button>

Scale Hover

<button className="px-5 py-2 bg-yellow-500 text-white rounded-lg transform hover:scale-110 transition">Scale</button>

Border Animated

<button className="px-5 py-2 text-purple-600 border-2 border-purple-600 rounded-lg relative overflow-hidden group">
  <span className="absolute inset-0 bg-purple-600 group-hover:w-full transition-all duration-300"></span>
  <span className="relative group-hover:text-white transition-all duration-300">Border Animate</span>
</button>

Confetti Button

<button onClick={() => alert('🎉 Confetti!')} className="px-5 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition">Confetti</button>

Toggle Color

<button onClick={(e) => e.target.classList.toggle('bg-blue-500')} className="px-5 py-2 bg-green-500 text-white rounded-lg transition">Toggle Color</button>

Loader Button

<button onClick={(e) => { e.target.innerText='Loading...'; setTimeout(() => e.target.innerText='Load',1000); }} className="px-5 py-2 bg-indigo-500 text-white rounded-lg transition">Load</button>

Grow On Click

<button onClick={(e) => e.currentTarget.classList.add('scale-125')} className="px-5 py-2 bg-yellow-500 text-white rounded-lg transition">Grow</button>

Slide Button

<button onClick={(e)=>{ e.currentTarget.classList.add('translate-x-8'); setTimeout(()=>e.currentTarget.classList.remove('translate-x-8'),300); }} className="px-5 py-2 bg-teal-500 text-white rounded-lg transition transform">Slide</button>

Spin & Grow

<button onClick={(e)=>{ e.currentTarget.classList.add('animate-spin','scale-125'); setTimeout(()=>{ e.currentTarget.classList.remove('animate-spin','scale-125'); },600); }} className="px-5 py-2 bg-indigo-500 text-white rounded-lg transition transform">Spin & Grow</button>

Bounce On Click

<button onClick={(e)=>e.currentTarget.classList.add('animate-bounce')} className="px-5 py-2 bg-red-500 text-white rounded-lg transition">Bounce</button>

Pulse On Click

<button onClick={(e)=>e.currentTarget.classList.add('animate-pulse')} className="px-5 py-2 bg-green-500 text-white rounded-lg transition">Pulse</button>

Spin On Click

<button onClick={(e)=>e.currentTarget.classList.add('animate-spin')} className="px-5 py-2 bg-blue-500 text-white rounded-lg transition">Spin</button>

Scale Up

<button onClick={(e)=>e.currentTarget.classList.add('scale-125')} className="px-5 py-2 bg-yellow-500 text-black rounded-lg transition transform">Scale</button>

Translate Right

<button onClick={(e)=>e.currentTarget.classList.add('translate-x-6')} className="px-5 py-2 bg-purple-500 text-white rounded-lg transition transform">Slide Right</button>

Continuous Pulse

<button className="px-5 py-2 bg-green-500 text-white rounded-lg animate-pulse">Pulse</button>

Ping Button

<button className="px-5 py-2 bg-blue-500 text-white rounded-lg relative"><span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75 animate-ping"></span>Ping</button>

Pulse & Scale

<button className="px-5 py-2 bg-yellow-500 text-black rounded-lg animate-pulse transform hover:scale-110">Pulse & Scale</button>

Ping + Shadow

<button className="px-5 py-2 bg-teal-500 text-white rounded-lg shadow-md relative"><span className="absolute inline-flex h-full w-full rounded-full bg-teal-400 opacity-50 animate-ping"></span>Ping Shadow</button>

Shimmer

<button className="px-5 py-2 bg-gradient-to-r from-purple-500 via-pink-500 to-purple-500 text-white rounded-lg animate-pulse">Shimmer</button>

Jiggle

<button className="px-5 py-2 bg-pink-500 text-white rounded-lg animate-bounce">Jiggle</button>

Opacity Flicker

<button onClick={(e)=>e.currentTarget.classList.add('opacity-50')} className="px-5 py-2 bg-indigo-500 text-white rounded-lg transition">Flicker</button>

Skew On Click

<button onClick={(e)=>e.currentTarget.classList.add('skew-x-12')} className="px-5 py-2 bg-teal-500 text-white rounded-lg transition transform">Skew</button>

Translate Y

<button onClick={(e)=>e.currentTarget.classList.add('-translate-y-6')} className="px-5 py-2 bg-orange-500 text-white rounded-lg transition transform">Up</button>

Shadow Pop

<button onClick={(e)=>e.currentTarget.classList.add('shadow-2xl')} className="px-5 py-2 bg-gray-700 text-white rounded-lg transition">Shadow</button>