<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="bg-gray-900 min-h-screen flex items-center justify-center p-4">
<div class="max-w-4xl w-full" x-data="{
clicked: false,
handleClick() {
this.clicked = true;
setTimeout(() => this.clicked = false, 2000);
}
}">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-2">Glowing Button Examples</h1>
<p class="text-gray-400">Minimal and professional designs with Tailwind CSS</p>
</div>
<div class="grid gap-8 md:grid-cols-2">
<!-- Primary Glowing Button -->
<div class="bg-gray-800 rounded-lg p-8 text-center">
<h3 class="text-white text-lg font-semibold mb-6">Primary Glow</h3>
<button
@click="handleClick"
class="glow-button relative px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg transition-all duration-300 hover:bg-blue-700 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
>
<span class="flex items-center justify-center gap-2">
<ion-icon name="rocket-outline" class="text-xl"></ion-icon>
Get Started
</span>
</button>
</div>
<!-- Success Glowing Button -->
<div class="bg-gray-800 rounded-lg p-8 text-center">
<h3 class="text-white text-lg font-semibold mb-6">Success Glow</h3>
<button
@click="handleClick"
class="relative px-8 py-4 bg-emerald-600 text-white font-semibold rounded-lg transition-all duration-300 hover:bg-emerald-700 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-gray-900"
style="animation: glow 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.2);"
@mouseenter="$el.style.animation = 'glow 1s ease-in-out infinite'"
@mouseleave="$el.style.animation = 'glow 2s ease-in-out infinite'"
>
<span class="flex items-center justify-center gap-2">
<ion-icon name="checkmark-circle-outline" class="text-xl"></ion-icon>
Confirm
</span>
</button>
</div>
<!-- Purple Glowing Button -->
<div class="bg-gray-800 rounded-lg p-8 text-center">
<h3 class="text-white text-lg font-semibold mb-6">Purple Glow</h3>
<button
@click="handleClick"
class="relative px-8 py-4 bg-purple-600 text-white font-semibold rounded-lg transition-all duration-300 hover:bg-purple-700 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900"
style="animation: glow 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(147, 51, 234, 0.5), 0 0 40px rgba(147, 51, 234, 0.3), 0 0 60px rgba(147, 51, 234, 0.2);"
@mouseenter="$el.style.animation = 'glow 1s ease-in-out infinite'"
@mouseleave="$el.style.animation = 'glow 2s ease-in-out infinite'"
>
<span class="flex items-center justify-center gap-2">
<ion-icon name="sparkles-outline" class="text-xl"></ion-icon>
Upgrade Pro
</span>
</button>
</div>
<!-- Cyan Glowing Button -->
<div class="bg-gray-800 rounded-lg p-8 text-center">
<h3 class="text-white text-lg font-semibold mb-6">Cyan Glow</h3>
<button
@click="handleClick"
class="relative px-8 py-4 bg-cyan-600 text-white font-semibold rounded-lg transition-all duration-300 hover:bg-cyan-700 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 focus:ring-offset-gray-900"
style="animation: glow 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(8, 145, 178, 0.5), 0 0 40px rgba(8, 145, 178, 0.3), 0 0 60px rgba(8, 145, 178, 0.2);"
@mouseenter="$el.style.animation = 'glow 1s ease-in-out infinite'"
@mouseleave="$el.style.animation = 'glow 2s ease-in-out infinite'"
>
<span class="flex items-center justify-center gap-2">
<ion-icon name="download-outline" class="text-xl"></ion-icon>
Download
</span>
</button>
</div>
</div>
<!-- Click Feedback -->
<div
x-show="clicked"
x-transition
class="mt-8 bg-gray-800 border border-gray-700 rounded-lg p-4 text-center"
>
<p class="text-green-400 flex items-center justify-center gap-2">
<ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
Button clicked successfully!
</p>
</div>
</div>
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5),
0 0 40px rgba(59, 130, 246, 0.3),
0 0 60px rgba(59, 130, 246, 0.2);
}
50% {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.7),
0 0 60px rgba(59, 130, 246, 0.5),
0 0 90px rgba(59, 130, 246, 0.3);
}
}
.glow-button {
animation: glow 2s ease-in-out infinite;
}
.glow-button:hover {
animation: glow 1s ease-in-out infinite;
}
No comments yet. Be the first!