Home
Anonymous
Animated button with rotating light beam

Animated button with rotating light beam

light beam rotates around the border

This tailwind example is contributed by Anonymous, on 29-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button

Author Anonymous

1.1k

6

Fork Fullscreen

<button class="group relative cursor-pointer overflow-hidden whitespace-nowrap px-6 py-4 text-white [background:var(--bg)] [border-radius:var(--radius)]  transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_8px_rgba(62,61,117,0.7)] flex justify-center" style="--spread: 90deg; --shimmer-color: #ffffff; --radius: 100px; --speed: 1.5s; --cut: 0.1em; --bg: radial-gradient(ellipse 80% 50% at 50% 120%,rgba(62, 61, 117),rgba(18, 18, 38));">
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute inset-[-100%] rotate-gradient">
                    <div class="absolute inset-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,hsl(0_0%_100%/1)_var(--spread),transparent_var(--spread))]"></div>
                </div>
            </div>
            <div class="absolute [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]"></div>
            <span class="z-10 w-48 whitespace-pre bg-gradient-to-b from-black from-30% to-gray-300/80 bg-clip-text text-center text-sm font-semibold leading-none tracking-tight text-white">Try it Out</span>
</button>

Related Examples

Tab Menu
Tab menu

Author:
Samuel Abera

8 months ago

4.3k
Buy Me a Coffee CTA section

Author:
Sienna

1 year ago

8.2k
rgb border button

Author:
Akram Khan

5 months ago

1.1k
Menu button

Author:
Freja Jensen

1 year ago

12.8k
Buttons examples

Author:
Manuela Bianka

1 year ago

10.5k
Floating pus button

Author:
Jaffar Hussain

4 months ago

687
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

1 year ago

11.5k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

2 months ago

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

Author:
Nishant Trivedi

1 year ago

15.7k
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.

Author:
Shakti

1 year ago

35.4k
tooltip Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

7 months ago

1.6k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

2 months ago

857

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.9