StackBits - React UI & Full-Stack Code Library

Buttons > Moving Border Button

🔄 Moving Border Button

The Animated Border Button adds a sleek, moving border effect using CSS keyframes, making buttons more interactive and eye-catching. Perfect for call-to-action buttons and modern UIs, it’s lightweight, customizable, and seamlessly integrates into any project. Adjust speed, color, and thickness to match your design needs for a polished, dynamic touch.

Preview

Follow below steps 👇🏻

Component

Create a file moving-border-button.tsx in your components folder and paste this code

1import React from 'react';
2        
3const MovingBorderButton = ({
4  children,
5  wrapperClassName,
6  className,
7  onClick,
8  type = 'button'
9}: {
10  children?: React.ReactNode;
11  wrapperClassName?: string;
12  className?: string;
13  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
14  type?: 'button' | 'submit' | 'reset';
15}) => {
16  return (
17    <button
18      className={`moving-border-btn rounded-full p-[1px] ${wrapperClassName}`}
19      onClick={onClick}
20      type={type}
21    >
22      <div
23        className={`bg-black hover:bg-neutral-900 transition-all rounded-full px-2 py-1 flex items-center justify-center relative ${className}`}
24      >
25        {children}
26      </div>
27    </button>
28  );
29};
30
31export default MovingBorderButton;

Usage

1<MovingBorderButton className="text-lg md:text-xl lg:text-3xl font-medium !px-5 sm:!px-10 py-4">
2    Join the speedforce
3</MovingBorderButton>

⭐️ Got a question or feedback?
Feel free to reach out!