Home
Dolbymat
Premium Button Collection with 12 Unique Animations

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 CSS v3. It is responsive.

Button

Author Dolbymat

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