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

797

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

Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

9 months ago

1.2k
Social Share
A social media showcase

Author:
Rajesh Maheshwari

8 months ago

605
less is more
less is more by salvator

Author:
Baraka Salvator

4 months ago

714
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

8 months ago

532
View More Button

Author:
Amit Pachange

2 years ago

19k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.5k
Payment Button

Author:
Md. Tofayel islam

1 year ago

3k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

7 months ago

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

Author:
Homayoun

4 weeks ago

116
Neomorphism button

Author:
Akram Khan

1 year ago

2.1k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

2 months ago

191
Button with shadow

Author:
Laurits

2 years ago

12.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components