futuristic button

This tailwind example is contributed by Crimson, on 02-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Button

Author Crimson

Tailwind v3.4 1.6k 5

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
    <ul class="list-disc text-lg px-6">
      <button class="relative px-8 py-4 font-bold text-white rounded-lg group overflow-hidden">
        
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-cyan-500 to-blue-500 opacity-70 blur-xl group-hover:opacity-100 transition-opacity duration-300"></span>
        
        
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-90"></span>
        
        
        <span class="absolute inset-0 w-1/4 h-full bg-white/20 skew-x-12 transform -translate-x-full group-hover:translate-x-[400%] transition-transform duration-1000"></span>
        
        
        <span class="relative flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            <span class="tracking-wider">ACTIVATE</span>
        </span>
        
        
        <span class="absolute inset-0 w-full h-full border border-cyan-300/50 rounded-lg"></span>
    </button>
    </ul>
  </div>
</div>

Related Examples

Buttons with Icon

_Amar_

4 years ago

16.8k
Border bottom button

Santos78

3 years ago

13.1k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Shakti

3 years ago

41.7k
Beautiful animated button
on hover effect

Dika Rahman

2 years ago

5.5k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Homayoun

1 year ago

923
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.

KULDEEP

1 year ago

1.4k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.5k
Buttons - Htmlwind
Primary buttons

Htmlwind

1 year ago

1.2k
Button With Loader
Tailwind Loader

Md. Tofayel islam

2 years ago

3.7k
Primary Button
Elegant button

Brandon D

4 years ago

12.5k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

535
Buttons popup on hover
Popup buttons on hover

Sophia Baker

3 years ago

14.9k