Skip to content

Animated button examples

Buttons are where people touch your site. These micro-interactions press, stretch and bounce like real objects, and each one is accessible and keyboard friendly.

Magnetic Pull Button

Warm Editorial

A charcoal pill that gets pulled toward the cursor within a 90px field, its label lagging a bit further behind for a layered parallax.

Tactile Micro-Interaction Buttons

Squish Press Button

Warm Editorial

A neo-print button with a hard offset shadow that physically presses down into the page on tap, then springs back.

Tactile Micro-Interaction Buttons

A destructive-action button that must be held for 1.2 seconds; a terracotta fill sweeps across, and releasing early rewinds it on a spring.

Tactile Micro-Interaction Buttons

Copy Button Morph

Warm Editorial

A compact copy button whose icon morphs into a drawn checkmark while the pill widens to reveal 'Copied' — layout-animated, no layout jump.

Tactile Micro-Interaction Buttons

A heart button that pops with an overshoot and scatters small paper-cut squares and circles in terracotta, cobalt and charcoal.

Tactile Micro-Interaction Buttons

Elastic Toggle Switch

Warm Editorial

A settings toggle whose knob stretches like taffy while traveling and settles with a bounce; the track ink-fills to cobalt.

Tactile Micro-Interaction Buttons

Rounded 90s buttons with black outlines; hovering wiggles the squiggle decoration and pressing pops dots out of the button.

Tactile Micro-Interaction Buttons

Puffy pastel clay buttons with inner highlights that deflate when pressed and re-inflate with a wobble.

Tactile Micro-Interaction Buttons

An 8-bit 'PRESS START' screen: a blinking pixel prompt, a chunky stepped button that drops a pixel and a coin counter that ticks up.

Tactile Micro-Interaction Buttons

Questions, answered

What is Specimen Design?

A free library of full website designs. Every design runs live in your browser and comes with a detailed prompt you can paste into Claude to build it. Single UI components live separately, in the components lab.

How do I use a Claude prompt to design a website?

Open any design, press “Copy Claude Prompt” and paste it into Claude. You get a complete React component with Tailwind CSS and Framer Motion that you can drop into a Next.js site.

Are the designs free to use?

Yes. All designs and code are free to use in personal and commercial projects under the MIT license.

How do I make an AI-built website not look AI-generated?

Start from a clear design language instead of defaults: a deliberate typeface pairing, a strict palette with one accent, and motion with real spring physics. Every prompt here spells those choices out.

Which design styles are included?

28 design languages, including Neo-Brutalist, Bauhaus, Swiss, Japanese Minimal, Luxury Noir, Retro 70s, Memphis, Y2K, Claymorphism, Risograph, Art Deco and 8-bit.

Can you build a custom website for my business?

Yes. Use the brief form on the homepage and you will get a reply within one working day.