Scale Hover Button

A button that scales up smoothly on hover

buttonhoverscale

Useto navigate between components

Preview

Code

TypeScript + React

'use client'

import { motion } from 'framer-motion'

export function ScaleHoverButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
      className="rounded-lg bg-accent px-8 py-3 font-semibold text-white shadow-lg"
    >
      Hover Me
    </motion.button>
  )
}

How to Use

1Install Framer Motion: npm install framer-motion
2Copy the code from above
3Paste it into your project and customize as needed
4Colors are customizable via Tailwind CSS classes. The default theme uses dark mode colors defined in your globals.css file