← Easeout Lab
Free component

Press button

Scales to .97 on press with a stiff spring and springs back on release. Works with the keyboard too.

Needspnpm add motion

components/press-button.tsx
"use client"

import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"

// Presses down to 97% on a stiff spring and springs back on release (mouse, touch or keyboard).
export function PressButton({ children = "Press me" }: { children?: React.ReactNode }) {
  const reduce = useReducedMotion()

  return (
    <motion.button
      type="button"
      whileTap={reduce ? undefined : { scale: 0.97 }}
      transition={{ type: "spring", stiffness: 500, damping: 30, mass: 1 }}
      className="cursor-pointer rounded-full border-0 bg-[#FF5A1F] px-6 py-3 text-[15px] font-medium text-[#0E0E0E] select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF5A1F]"
    >
      {children}
    </motion.button>
  )
}

Want a whole page built like this?