FreeButtons

Magnetic Glow Button

Use this for primary CTAs on landing pages, pricing cards, modal footers, and onboarding screens where a small motion cue can make the next action feel more deliberate.

ReactTailwind CSSMotionButton

Overview

A springy CTA button with hover lift, tap feedback, and a passing shine effect.

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

<MagneticGlowButton />

Magnetic Glow Button.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function MagneticGlowButton() {
  return (
    <motion.button
      type="button"
      whileHover={{ y: -3, scale: 1.04 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 420, damping: 24 }}
      className="group relative overflow-hidden rounded-full border border-lime-300/30 bg-lime-300 px-6 py-3 text-sm font-bold text-zinc-950 shadow-2xl shadow-lime-300/20"
    >
      <span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/50 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
      <span className="relative">Start building</span>
    </motion.button>
  );
}