Fade InHoverStagger ListLayout ShiftModal BackdropPage TransitionRotateScale UpScroll ParallaxShape MorphingSlide UpText Typing
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!