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

316

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

beautiful buttons set
a beautofull buttons set like primary, outline and text.

Author:
Akram Khan

1 year ago

1.6k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

9 months ago

1k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.2k
flower
by salvator

Author:
Baraka Salvator

9 months ago

1.4k
IMDB score and votes box

Author:
Darius G

2 years ago

8.8k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

952
CTA gradient button

Author:
Anonymous

1 year ago

2.5k
Get it on Google Play button dark

Author:
Simon Scheffer

3 years ago

12.7k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
Listen on Spotify/Apple Music Button

Author:
Patricio Garcia

1 year ago

2.7k
Color Changing Gradient Button
Color Changing Gradient Button

Author:
EquinoX

1 year ago

3.7k
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Author:
Prajwal Hallale

2 years ago

17.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components