← Easeout LabFree 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
"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>
)
}