Premium Button Collection with 12 Unique Animations

Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

This tailwind example is contributed by Dolbymat, on 29-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Button

Author Dolbymat

Tailwind v3.4 1.3k 4

Fork Fullscreen

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl font-bold text-white overflow-hidden transform transition-all duration-300 hover:scale-110 hover:shadow-[0_0_40px_rgba(168,85,247,0.6)]">
                    <span class="relative z-10">Glow Effect</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-pink-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-bold text-white overflow-hidden transform transition-all duration-300 hover:scale-110">
                    <span class="relative z-10">Shine Effect</span>
                    <div class="absolute inset-0 w-1/4 h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-30 transform -skew-x-12 group-hover:translate-x-[400%] transition-all duration-700"></div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 bg-slate-800 rounded-xl font-bold text-white overflow-hidden transform transition-all duration-300 hover:scale-110">
                    <span class="relative z-10">Border Animate</span>
                    <div class="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-emerald-500 transition-all duration-300"></div>
                    <div class="absolute inset-0 bg-gradient-to-r from-emerald-500 to-teal-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="px-8 py-4 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl font-bold text-white shadow-[0_8px_0_rgb(185,28,28)] transform transition-all duration-100 hover:shadow-[0_4px_0_rgb(185,28,28)] hover:translate-y-1 active:shadow-[0_0_0_rgb(185,28,28)] active:translate-y-2">
                    3D Push
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="px-8 py-4 bg-transparent border-2 border-pink-500 rounded-xl font-bold text-pink-500 shadow-[0_0_20px_rgba(236,72,153,0.3)] hover:shadow-[0_0_40px_rgba(236,72,153,0.6)] hover:bg-pink-500 hover:text-white transform transition-all duration-300 hover:scale-110 animate-pulse">
                    Neon Pulse
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 border-2 border-indigo-500 rounded-xl font-bold text-indigo-500 overflow-hidden transform transition-all duration-300 hover:text-white hover:scale-110">
                    <span class="relative z-10">Slide Fill</span>
                    <div class="absolute inset-0 bg-indigo-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="px-8 py-4 backdrop-blur-xl bg-white/10 border border-white/20 rounded-xl font-bold text-white shadow-xl transform transition-all duration-300 hover:bg-white/20 hover:scale-110">
                    Glass Button
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 bg-slate-800 rounded-xl font-bold text-white overflow-hidden transform transition-all duration-300 hover:scale-110">
                    <span class="relative z-10">Split Color</span>
                    <div class="absolute inset-0 flex">
                        <div class="w-1/2 bg-purple-600 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
                        <div class="w-1/2 bg-pink-600 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
                    </div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group relative px-8 py-4 bg-gradient-to-r from-teal-500 to-emerald-600 rounded-xl font-bold text-white overflow-hidden transform transition-all duration-300 hover:scale-110">
                    <span class="relative z-10">Ripple Effect</span>
                    <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 rounded-full transform scale-0 group-hover:scale-150 transition-all duration-500"></div>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <div
                    class="relative p-[2px] bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-xl transform transition-all duration-300 hover:scale-110 hover:shadow-[0_0_30px_rgba(168,85,247,0.5)]">
                    <button class="px-8 py-4 bg-slate-900 rounded-xl font-bold text-white">
                        Gradient Border
                    </button>
                </div>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="group px-8 py-4 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-xl font-bold text-white flex items-center gap-2 overflow-hidden transform transition-all duration-300 hover:scale-110">
                    <span>Icon Slide</span>
                    <svg class="w-5 h-5 transform transition-transform duration-300 group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </button>
            </div>

<div class="flex items-center justify-center p-8">
                <button class="px-8 py-4 border-4 border-double border-cyan-500 rounded-xl font-bold text-cyan-500 transform transition-all duration-300 hover:border-cyan-400 hover:text-cyan-400 hover:scale-110 hover:rotate-2">
                    Double Border
                </button>
            </div>

</div>
    </div>

</body>

Related Examples

pasta
by salvator

Baraka Salvator

1 year ago

1.4k
Buttons popup on hover
Popup buttons on hover

Sophia Baker

3 years ago

14.9k
Game changer
by salvator

Baraka Salvator

1 year ago

1.5k
button
Background Studio

nickosamba.nh21

9 months ago

808
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.7k
Buttons variations

R.P Ketan

3 years ago

10.4k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Kavita Joshi

2 years ago

8.5k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Carlos Adrian Garcia

2 years ago

10.2k
Back to top button

Rafferty Kim

3 years ago

15.9k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Raul antonio de la cruz hernandez

1 year ago

1.4k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Ahita Bisma Adlula

1 year ago

1.3k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Komal Jain

2 years ago

3k