React › Animation in React (Framer Motion & React Spring)

How would you animate a button so it grows slightly when a user hovers over it?

Beginner

Answer

Framer Motion has a whileHover prop that lets you describe how a component should look only while the mouse is hovering over it, and it automatically animates back to normal once the mouse moves away.

import { motion } from 'framer-motion';

function HoverButton() {
  return (
    <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
      Click Me
    </motion.button>
  );
}

Real-world example A pricing page adds a small hover grow effect to its subscribe button, making the button feel more clickable and interactive to visitors.

Common follow-ups: What is the difference between whileHover and whileTap?;How would you add the same hover effect to many buttons without repeating code?

Custom Hooks;Components & JSX