FreeButtons

Moving Border

Use this component for primary actions, submit buttons, upgrade CTAs, and any button that needs subtle motion without becoming noisy.

ReactTailwind CSSMotionButton

Overview

A rounded button with an animated conic border that rotates around the container.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<MovingBorder />

Moving Border.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function MovingBorder() {
  return (
    <button className="relative overflow-hidden rounded-full p-px">
      <motion.span
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
        className="absolute -inset-8 bg-[conic-gradient(from_90deg,transparent,rgba(125,211,252,.9),transparent_30%)]"
      />
      <span className="relative block rounded-full bg-zinc-950 px-8 py-3 text-sm font-semibold text-white">
        Submit Report
      </span>
    </button>
  );
}