Spring Button

Button with spring physics: scales up on hover and bounces back on press using whileTap + spring transition.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Spring ButtonButton with spring physics: scales up on hover and bounces back on press using whileTap + spring transition.

"use client";
import { motion } from "framer-motion";

type SpringButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
};

export function SpringButton({ children, onClick }: SpringButtonProps) {
  return (
    <motion.button
      className="mp-spring-btn"
      onClick={onClick}
      whileHover={{ scale: 1.06 }}
      whileTap={{ scale: 0.88 }}
      transition={{ type: "spring", stiffness: 420, damping: 14 }}
    >
      {children}
    </motion.button>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Button label or content
onClick	() => void	—	Click handler