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

Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
tooltip Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

9 months ago

734
Continue with Google button
Login with google button for social login.

S. Patel

3 years ago

25.6k
futuristic button

Crimson

1 year ago

1.6k
CTA gradient button

Anonymous

2 years ago

3.1k
Floating pus button

Jaffar Hussain

2 years ago

2.3k
Componentes para mi empresa
para mi empresa

BocchiChan

1 year ago

1.5k
Buttons

Maxim

1 year ago

2.1k
Buttons in pair

Bunny

3 years ago

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

Homayoun

1 year ago

1.1k
hero page
by salvator

Baraka Salvator

1 year ago

2.5k

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.