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 v3.4. It is responsive. It supports dark mode.

Button

Author Anonymous

Tailwind v3.4 3.9k 11

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

Sharp corner button design
button with hover effect

Amit Pachange

3 years ago

13.5k
button
Background Studio

nickosamba.nh21

9 months ago

806
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
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.1k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

7.3k
Button group
Add active class to clicked button using JavaScript

TailwindFlex

4 years ago

11k
Menu button

Freja Jensen

3 years ago

17k
button

Raul antonio de la cruz hernandez

11 months ago

1k
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! 🔝💻

Abdul Baset Bappy

1 year ago

1.6k
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Button

Lokesh H

2 months ago

268
Dioganal cuts Buttons

Adulik

3 years ago

7.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.