Tailwind CSS Gradient Button Code Snippet
Amelia
Created Nov 03, 2025
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="min-h-screen bg-gray-50 flex items-center justify-center p-8">
<div class="max-w-4xl w-full space-y-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-2">Gradient Button Examples</h1>
<p class="text-gray-600">Minimal and professional gradient buttons with Tailwind CSS</p>
</div>
<!-- Button Examples Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Primary Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Primary Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
<ion-icon name="rocket-outline" class="text-xl"></ion-icon>
<span>Get Started</span>
</button>
</div>
<!-- Success Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Success Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-gradient-to-r from-green-400 to-emerald-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
<ion-icon name="checkmark-circle-outline" class="text-xl"></ion-icon>
<span>Confirm</span>
</button>
</div>
<!-- Warm Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Warm Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-gradient-to-r from-orange-400 to-pink-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
<ion-icon name="flame-outline" class="text-xl"></ion-icon>
<span>Trending</span>
</button>
</div>
<!-- Dark Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Dark Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-gradient-to-r from-gray-700 to-gray-900 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
<ion-icon name="settings-outline" class="text-xl"></ion-icon>
<span>Settings</span>
</button>
</div>
<!-- Outline Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Outline Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-white border-2 border-transparent bg-clip-padding relative font-medium px-6 py-3 rounded-lg shadow-sm hover:shadow-md transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2"
style="background-image: linear-gradient(white, white), linear-gradient(to right, rgb(59, 130, 246), rgb(147, 51, 234)); background-origin: border-box; background-clip: padding-box, border-box;">
<ion-icon name="heart-outline" class="text-xl text-blue-500"></ion-icon>
<span class="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent font-semibold">Like</span>
</button>
</div>
<!-- Animated Gradient Button -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-sm font-semibold text-gray-700 mb-4">Animated Gradient</h3>
<button
x-data="{ pressed: false }"
@click="pressed = true; setTimeout(() => pressed = false, 200)"
:class="pressed ? 'scale-95' : 'scale-100'"
class="w-full bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 bg-size-200 bg-pos-0 hover:bg-pos-100 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-500 hover:scale-105 flex items-center justify-center gap-2"
style="background-size: 200% auto;">
<ion-icon name="sparkles-outline" class="text-xl"></ion-icon>
<span>Download</span>
</button>
</div>
</div>
<!-- Code Example -->
<div class="bg-gray-900 p-6 rounded-lg mt-8">
<h3 class="text-sm font-semibold text-gray-300 mb-3">Basic Usage</h3>
<code class="text-sm text-gray-300 font-mono">
<pre class="whitespace-pre-wrap"><button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
Button Text
</button></pre>
</code>
</div>
</div>
body {
margin: 0;
padding: 20px;
font-family: system-ui, -apple-system, sans-serif;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #333;
margin-top: 0;
}
button {
background: #000;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
console.log('Editor loaded!');
let clickCount = 0;
function handleClick() {
clickCount++;
const output = document.getElementById('output');
output.innerHTML = `
<h3>Clicked ${clickCount} time(s)!</h3>
<p>Time: ${new Date().toLocaleTimeString()}</p>
`;
console.log(`Button clicked ${clickCount} times`);
}
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!