Gradient Button Collection
A collection of beautiful gradient buttons with hover effects and smooth transitions. Includes various color schemes and sizes perfect for CTAs, forms, and interactive elements.
button gradient
Loading component...
103 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Button Collection</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-6">
<div class="max-w-4xl w-full space-y-8">
<!-- Large Buttons -->
<div class="space-y-4">
<h2 class="text-2xl font-bold text-white mb-6">Large Buttons</h2>
<div class="flex flex-wrap gap-4">
<button
class="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-200">
Get Started
</button>
<button
class="px-8 py-4 bg-gradient-to-r from-pink-500 to-red-600 text-white font-semibold rounded-lg shadow-lg hover:from-pink-600 hover:to-red-700 transform hover:scale-105 transition-all duration-200">
Learn More
</button>
<button
class="px-8 py-4 bg-gradient-to-r from-green-500 to-teal-600 text-white font-semibold rounded-lg shadow-lg hover:from-green-600 hover:to-teal-700 transform hover:scale-105 transition-all duration-200">
Subscribe
</button>
</div>
</div>
<!-- Medium Buttons -->
<div class="space-y-4">
<h2 class="text-2xl font-bold text-white mb-6">Medium Buttons</h2>
<div class="flex flex-wrap gap-4">
<button
class="px-6 py-3 bg-gradient-to-r from-indigo-500 to-blue-600 text-white font-medium rounded-lg shadow-md hover:from-indigo-600 hover:to-blue-700 transition-all duration-200">
Primary Action
</button>
<button
class="px-6 py-3 bg-gradient-to-r from-orange-500 to-yellow-600 text-white font-medium rounded-lg shadow-md hover:from-orange-600 hover:to-yellow-700 transition-all duration-200">
Secondary Action
</button>
<button
class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white font-medium rounded-lg shadow-md hover:from-purple-600 hover:to-pink-700 transition-all duration-200">
Tertiary Action
</button>
</div>
</div>
<!-- Small Buttons -->
<div class="space-y-4">
<h2 class="text-2xl font-bold text-white mb-6">Small Buttons</h2>
<div class="flex flex-wrap gap-3">
<button
class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-sm font-medium rounded-md shadow hover:from-cyan-600 hover:to-blue-700 transition-all duration-200">
Save
</button>
<button
class="px-4 py-2 bg-gradient-to-r from-red-500 to-pink-600 text-white text-sm font-medium rounded-md shadow hover:from-red-600 hover:to-pink-700 transition-all duration-200">
Cancel
</button>
<button
class="px-4 py-2 bg-gradient-to-r from-emerald-500 to-green-600 text-white text-sm font-medium rounded-md shadow hover:from-emerald-600 hover:to-green-700 transition-all duration-200">
Confirm
</button>
</div>
</div>
<!-- With Icons -->
<div class="space-y-4">
<h2 class="text-2xl font-bold text-white mb-6">Buttons with Icons</h2>
<div class="flex flex-wrap gap-4">
<button
class="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-violet-500 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:from-violet-600 hover:to-purple-700 transition-all duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download
</button>
<button
class="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white font-medium rounded-lg shadow-lg hover:from-blue-600 hover:to-cyan-700 transition-all duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Add to Cart
</button>
<button
class="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-rose-500 to-red-600 text-white font-medium rounded-lg shadow-lg hover:from-rose-600 hover:to-red-700 transition-all duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
Favorite
</button>
</div>
</div>
</div>
</body>
</html>