Back to Discover

Tailwind CSS Animated Button Examples

Amelia

Created Nov 03, 2025

173 views

0 likes

0 comments

0 forks

Export Fork Like

                                                                                                            <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

No comments yet. Be the first!

Related Projects

View Project

Tailwind CSS Glowing Button Examples

Amelia

207 0 0

View Project

Tailwind CSS Checkbox and Radio Buttons Examples

Amelia

162 0 0

View Project

Animated Close Buttons in CSS

Anna

195 1 0

View Project

Animated Buttons in CSS

Sofia

170 0 0

View Project

Tailwind CSS Hero Section Examples

Amelia

199 0 0

View Project

Tailwind CSS Hover Animation Examples

Amelia

193 0 0