Tailwind CSS Animated Button Examples
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="bg-gray-50 min-h-screen p-8">
<div class="max-w-6xl mx-auto">
<h1 class="text-4xl font-bold text-gray-900 mb-2">Animated Button Examples</h1>
<p class="text-gray-600 mb-12">Minimal and professional button designs with smooth animations</p>
<!-- Row 1: Slide and Scale Effects -->
<div class="mb-16">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Slide & Scale Effects</h2>
<div class="flex flex-wrap gap-4">
<!-- Slide Right Button -->
<button class="group relative px-6 py-3 font-medium text-white bg-blue-600 rounded-lg overflow-hidden transition-all duration-300 hover:bg-blue-700">
<span class="relative z-10 flex items-center gap-2">
<ion-icon name="arrow-forward-outline" class="text-xl transition-transform duration-300 group-hover:translate-x-1"></ion-icon>
Slide Right
</span>
</button>
<!-- Scale Up Button -->
<button class="px-6 py-3 font-medium text-white bg-purple-600 rounded-lg transition-all duration-300 hover:scale-105 hover:bg-purple-700 hover:shadow-lg flex items-center gap-2">
<ion-icon name="expand-outline" class="text-xl"></ion-icon>
Scale Up
</button>
<!-- Slide Background Button -->
<button class="group relative px-6 py-3 font-medium text-white bg-gray-900 rounded-lg overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 transform -translate-x-full transition-transform duration-300 group-hover:translate-x-0"></span>
<span class="relative z-10 flex items-center gap-2">
<ion-icon name="color-wand-outline" class="text-xl"></ion-icon>
Slide Fill
</span>
</button>
</div>
</div>
<!-- Row 2: Border and Glow Effects -->
<div class="mb-16">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Border & Glow Effects</h2>
<div class="flex flex-wrap gap-4">
<!-- Border Expand Button -->
<button class="group relative px-6 py-3 font-medium text-gray-900 bg-white border-2 border-gray-900 rounded-lg overflow-hidden transition-all duration-300 hover:text-white">
<span class="absolute inset-0 bg-gray-900 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100"></span>
<span class="relative z-10 flex items-center gap-2">
<ion-icon name="git-compare-outline" class="text-xl"></ion-icon>
Border Expand
</span>
</button>
<!-- Glow Button -->
<button class="px-6 py-3 font-medium text-white bg-gradient-to-r from-pink-500 to-rose-500 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.5)] hover:scale-105 flex items-center gap-2">
<ion-icon name="sparkles-outline" class="text-xl"></ion-icon>
Glow Effect
</button>
<!-- Outline to Fill Button -->
<button class="group px-6 py-3 font-medium text-emerald-600 border-2 border-emerald-600 rounded-lg transition-all duration-300 hover:bg-emerald-600 hover:text-white flex items-center gap-2">
<ion-icon name="checkmark-circle-outline" class="text-xl"></ion-icon>
Outline Fill
</button>
</div>
</div>
<!-- Row 3: Icon and Loading Effects -->
<div class="mb-16">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Icon & Loading Effects</h2>
<div class="flex flex-wrap gap-4">
<!-- Icon Rotate Button -->
<button class="group px-6 py-3 font-medium text-white bg-indigo-600 rounded-lg transition-all duration-300 hover:bg-indigo-700 flex items-center gap-2">
<ion-icon name="refresh-outline" class="text-xl transition-transform duration-500 group-hover:rotate-180"></ion-icon>
Icon Rotate
</button>
<!-- Shimmer Button -->
<button class="shimmer relative px-6 py-3 font-medium text-white bg-gradient-to-r from-amber-500 to-orange-500 rounded-lg overflow-hidden flex items-center gap-2">
<ion-icon name="flash-outline" class="text-xl"></ion-icon>
Shimmer Effect
</button>
<!-- Loading Button with Alpine -->
<div x-data="{ loading: false }">
<button
@click="loading = true; setTimeout(() => loading = false, 2000)"
:disabled="loading"
class="px-6 py-3 font-medium text-white bg-teal-600 rounded-lg transition-all duration-300 hover:bg-teal-700 disabled:opacity-75 disabled:cursor-not-allowed flex items-center gap-2 min-w-[140px] justify-center"
>
<ion-icon
:name="loading ? 'hourglass-outline' : 'download-outline'"
class="text-xl"
:class="{ 'animate-spin': loading }"
></ion-icon>
<span x-text="loading ? 'Loading...' : 'Download'"></span>
</button>
</div>
</div>
</div>
<!-- Row 4: Advanced Effects -->
<div class="mb-16">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Advanced Effects</h2>
<div class="flex flex-wrap gap-4">
<!-- Ripple Effect Button -->
<div x-data="{ ripple: false }">
<button
@click="ripple = true; setTimeout(() => ripple = false, 600)"
class="relative px-6 py-3 font-medium text-white bg-cyan-600 rounded-lg overflow-hidden transition-all duration-300 hover:bg-cyan-700 flex items-center gap-2"
>
<span
x-show="ripple"
x-transition:enter="transition ease-out duration-600"
x-transition:enter-start="opacity-100 scale-0"
x-transition:enter-end="opacity-0 scale-150"
class="absolute inset-0 bg-white rounded-full"
></span>
<ion-icon name="radio-button-on-outline" class="text-xl relative z-10"></ion-icon>
<span class="relative z-10">Ripple Click</span>
</button>
</div>
<!-- Bounce Button -->
<button class="px-6 py-3 font-medium text-white bg-red-600 rounded-lg transition-all duration-300 hover:bg-red-700 hover:animate-bounce flex items-center gap-2">
<ion-icon name="heart-outline" class="text-xl"></ion-icon>
Bounce
</button>
<!-- 3D Lift Button -->
<button class="px-6 py-3 font-medium text-white bg-violet-600 rounded-lg transition-all duration-300 hover:bg-violet-700 hover:shadow-[0_10px_20px_rgba(139,92,246,0.3)] hover:-translate-y-1 flex items-center gap-2">
<ion-icon name="cube-outline" class="text-xl"></ion-icon>
3D Lift
</button>
</div>
</div>
<!-- Row 5: State Buttons -->
<div>
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Interactive States</h2>
<div class="flex flex-wrap gap-4">
<!-- Toggle Button -->
<div x-data="{ active: false }">
<button
@click="active = !active"
:class="active ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-600 hover:bg-gray-700'"
class="px-6 py-3 font-medium text-white rounded-lg transition-all duration-300 flex items-center gap-2"
>
<ion-icon :name="active ? 'checkmark-circle' : 'ellipse-outline'" class="text-xl"></ion-icon>
<span x-text="active ? 'Active' : 'Inactive'"></span>
</button>
</div>
<!-- Counter Button -->
<div x-data="{ count: 0 }">
<button
@click="count++"
class="group px-6 py-3 font-medium text-white bg-orange-600 rounded-lg transition-all duration-300 hover:bg-orange-700 hover:scale-105 flex items-center gap-2"
>
<ion-icon name="add-circle-outline" class="text-xl transition-transform duration-300 group-hover:rotate-90"></ion-icon>
<span>Clicked: <span x-text="count" class="font-bold"></span></span>
</button>
</div>
<!-- Success Button -->
<div x-data="{ success: false }">
<button
@click="success = true; setTimeout(() => success = false, 2000)"
:class="success ? 'bg-green-600' : 'bg-slate-600 hover:bg-slate-700'"
class="px-6 py-3 font-medium text-white rounded-lg transition-all duration-300 flex items-center gap-2 min-w-[130px] justify-center"
>
<ion-icon
:name="success ? 'checkmark-done-outline' : 'paper-plane-outline'"
class="text-xl transition-all duration-300"
:class="{ 'scale-125': success }"
></ion-icon>
<span x-text="success ? 'Success!' : 'Submit'"></span>
</button>
</div>
</div>
</div>
</div>
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.shimmer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
}
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!