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

632

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

Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

6k
pasta
by salvator

Author:
Baraka Salvator

2 months ago

297
Material 3 Buttons [Light]
Buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

2 months ago

532
Neomorphism button

Author:
Akram Khan

1 year ago

2k
Button
Material Button

Author:
Akram Khan

11 months ago

920
chair
by salvator

Author:
Baraka Salvator

2 months ago

357
Hamburger menu button with hover effect

Author:
_Amar_

2 years ago

17.3k
Elevated buttons

Author:
Leon Bachmann

2 years ago

14k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

3 months ago

533
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Linkedin login/signup button

Author:
Shakti

2 years ago

12.9k
strawbery
by salvator

Author:
Baraka Salvator

2 months ago

273

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components