Neo Press Button

Neo Press Button

The Framer button people can't stop pressing.

A chunky, tactile button that sinks into its own hard shadow. Hover and it dips, press and it lands flat, release and a spring pops it back. It feels like a real key, and visitors click it just to feel it again.

Why you'll love it

• Three states, spring motion: rest, hover and pressed, each with natural spring physics

• Icons that react: the plus spins into a cross, the star twirls, the heart pulses, the download drops, the send flies off

• Soft light sweep across the face on hover

• Haptic buzz on supported phones

• Drop in and go: paste it, set the label, link it, done

Customize everything

• Color: Yellow, Green, Pink, Blue, Orange, Lilac, or Custom with your own fill, text and border + shadow colors

• Shape: Rounded, Pill or Sharp

• Resize to scale: drag the component bigger or smaller and the text, icon, padding and shadow scale together

• 13 icons: Plus, Arrow, Check, Star, Heart, Download, Send, Cart, Play, Mail, Sparkle, External link or None

• Label, link and new-tab toggle, plus a click event for your interactions

• Any font and weight

• Border width and shadow depth

• Hover sink: choose how far it dips before you press

• Spring controls: stiffness, damping and mass, from snappy to bouncy

• Shine and haptic switches

Built the Framer way

• Fits its label automatically, or fills any width you set

• Static render and export safe: nothing animates there

• Respects reduced-motion settings

• Clear keyboard focus ring

• Works as a real link or button

Perfect for

Hero calls to action, pricing cards, sign-up forms, portfolios, landing pages and neo-brutalist designs.

Set up in 30 seconds

1. Open your project in Framer.

2. Paste the link above onto the canvas (Cmd/Ctrl + V), or open the link in your browser and follow the steps to add it to your project.

3. Drag the component onto your page.

Add it once, restyle it anywhere.