Hover Border Gradient

buttons

Sleek button wrapped in dynamic spinning border gradient highlight on hover.

#button#gradient#hover#border

Live Interactive Preview

Component Source Code

Select language in the dropdown

HoverBorderGradient.tsx

1'use client';
2
3import React from 'react';
4import { ArrowRight } from 'lucide-react';
5
6export default function HoverBorderGradient() {
7  return (
8    <div className="relative inline-block p-[1.5px] overflow-hidden rounded-full group cursor-pointer">
9      <div className="absolute inset-0 bg-gradient-to-r from-teal-400 via-cyan-500 to-indigo-600 rounded-full opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-spin-slow" />
10      <button className="relative flex items-center gap-2 rounded-full bg-slate-950 px-6 py-2.5 sm:py-3 text-sm font-semibold text-white backdrop-blur-xl transition-all group-hover:bg-slate-900">
11        <span>Hover Border Gradient</span>
12        <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
13      </button>
14    </div>
15  );
16}

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/HoverBorderGradient.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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