Hover Scale & Shadow Button (Framer Motion)

Framer Motion Animation Preview: Button

Code Snippet


// components/FM_Button.tsx
import { motion } from "framer-motion";

export const FM_Button: React.FC<{ label: string }> = ({ label }) => (
  <motion.button
    whileHover={{ scale: 1.04, y: -2 }}
    whileTap={{ scale: 0.98 }}
    transition={{ type: "spring", stiffness: 300 }}
    className="px-4 py-2 rounded-md bg-indigo-600 text-white"
  >
    {label}
  </motion.button>
);

Explanation

  • whileHover: Scales the button slightly and lifts it on hover.
  • whileTap: Shrinks the button slightly when clicked.
  • transition: Uses spring physics for a smooth bounce effect.
  • Perfect for micro-interactions to make buttons feel responsive and lively!