Home
Crimson
futuristic button

futuristic button

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

Button

Author Crimson

905

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 examples

Author:
Manuela Bianka

3 years ago

12.5k
flower
by salvator

Author:
Baraka Salvator

8 months ago

1.1k
3D button with hover effect!

Author:
Laurits

3 years ago

18.2k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

21.4k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

12.9k
Buttons - Htmlwind
Primary buttons

Author:
Htmlwind

8 months ago

545
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

4 months ago

332
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
András Szehofner

1 year ago

1.1k
CTA gradient button

Author:
Anonymous

1 year ago

2.5k
Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

8 months ago

864
Buttons in pair

Author:
Amit Pachange

3 years ago

10.8k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components