Moving Border Button

buttons

Dynamic button with an animated gradient border sweeping around the rounded perimeter.

#button#moving-border#animation#spatial

Live Interactive Preview

Component Source Code

Select language in the dropdown

MovingBorderButton.tsx

1'use client';
2
3import React from 'react';
4
5export default function MovingBorderButton() {
6  return (
7    <div className="relative inline-block overflow-hidden rounded-xl p-[2px] shadow-sm">
8      <div className="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#2563eb_0%,#a855f7_50%,#2563eb_100%)]" />
9      <button className="relative flex items-center justify-center rounded-[10px] bg-white dark:bg-slate-950 px-6 py-2.5 sm:py-3 text-sm font-semibold text-slate-900 dark:text-white transition-colors hover:bg-slate-50 dark:hover:bg-slate-900 active:scale-95">
10        Moving Border
11      </button>
12    </div>
13  );
14}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/MovingBorderButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import MovingBorderButton from '@/components/buttons/MovingBorderButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <MovingBorderButton />
7    </main>
8  );
9}