import { cn } from "@/lib/cn";
 
type ButtonProps = React.ComponentProps<"button">;
 
// Scales to 0.96 on press, so the click feels physical.
export function Button({ className, ...props }: ButtonProps) {
  return (
    <button
      className={cn("h-10 rounded-full px-4 transition-[scale] duration-150 active:scale-[0.96]", className)}
      {...props}
    />
  );
}
 
export default function Demo() {
  return <Button onClick={() => console.log(42)}>Save</Button>;
}
/* Strong ease-out: responds at once, then settles. */
.button {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  transition: scale 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease;
}
 
.button:active {
  scale: 0.96;
}
 
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 150ms ease;
  }
}

Code block

Switch files with a sliding underline and copy with one click.

Cards & media
View source