Free: Stamp, a component, is yours when you sign up with your email. Get it free
FontDex
Open menu

Type to search. Use the arrow keys and Enter.
HTML · CSS · JS component

Stamp A button that stamps APPROVED onto the page with a satisfying thunk

An approval button in plain HTML, CSS and JavaScript that presses down like a real rubber stamp and inks APPROVED, PAID or any word you choose, in about 9 KB with no dependencies.

Get it free Open live demo

Free · no payment needed

Built with plain HTML, CSS and JavaScript. One-time price.

  • Instant secure download
  • Personal and Commercial licenses
  • 7-day refund promise
Stamp
Reel
Try before you buy

Live demo

Press it, tab through it with the keyboard, try every variant. This is the real component with demo content only.

Open the live demo
Details

Desktop and mobile, pixel-checked

Tested at 1440, 768 and 390 px wide: no horizontal scrolling, readable contrast, keyboard friendly.

Stamp full page on desktop
Stamp full page on mobile
Features

What makes Stamp work

Approve and Pay buttons usually change color and show a toast, so the moment that matters feels like nothing happened.

1

A real press

The button presses down and the ink lands on the downstroke, so the action feels physical.

2

Any word, any ink

APPROVED, PAID, SHIPPED or your own text, with the ink color set by one CSS variable.

3

Stamps anything

Point it at a card, invoice or any element with data-target and the mark lands on that element.

4

Accessible by default

A native button that announces its result to screen readers, with a visible focus ring and no movement when reduced motion is on.

5

Tiny and dependency-free

One CSS file and one JavaScript file, about 9 KB together. No framework, no build step, works offline.

In the box

What is included

  • A real press
  • Any word, any ink
  • Stamps anything
  • Accessible by default
  • Tiny and dependency-free
  • Plain HTML, CSS and JavaScript: no dependencies
  • Full source: HTML, CSS and JavaScript (no dependencies, no build step)
  • A live demo page with every variant and the copy-paste snippet
  • README: install, options, theming and accessibility notes
  • LICENSE and CREDITS files
  • Your license key
In the zip

What is in the zip

  • CREDITS.md
  • LICENSE.txt
  • README.md
  • demo.css
  • index.html
  • stamp.css
  • stamp.js
Who it is for

Built for Front-end developers

Front-end developers, dashboard and SaaS builders, and designers who want approve, pay and review actions to feel final and a little playful

stamp buttonapprove buttonanimated buttoncss animationvanilla javascriptui componentmicrointeractionhtml css js componentpayment confirmationapproval workflow

Free with sign-up

Get Stamp free

Sign up with your email and download it right away. No card and no payment. Use it to see how every FontDex product is built.

$No card data on our sideHandled by certified gateways.
↓Signed, expiring downloadPrivate storage, 24-hour links.
✓7-day refund promiseBroken or not as described? Refunded.
★Full sourceNo build step, no lock-in.
Questions

Frequently asked

What exactly do I get?

A ZIP with the complete Stamp component: the CSS, the JavaScript, a demo page with every variant, a README, the LICENSE and CREDITS. No build step and no dependencies: copy two files into your project, or open index.html to see it working.

Does it work with React, Vue or other frameworks?

Yes. Stamp is a plain CSS file and a plain JavaScript file. Include them as they are, or wrap the markup in your own component. The README shows the pattern.

Is it accessible?

It is keyboard operable, announces its result to screen readers, shows a visible focus ring and respects the reduced-motion setting. The README lists what was checked.

Which license do I need?

Personal covers one website or app (yours or one client's). Commercial covers unlimited websites and apps, including client work. Neither allows reselling the component itself.

Do I need to know how to code?

Basic HTML is enough to add it to a page. Colors, sizes and timing are CSS variables, listed in the README.

What if something is broken?

Email us with your order ID. We fix it, or refund you within 7 days of purchase.

Can I stamp a different word?

Yes. Set data-label (or the label option) to any short text such as PAID or SHIPPED. The ink color is the --stamp-color variable.

Can it stamp something other than its own paper?

Yes. Add data-target with a CSS selector and the mark is inked onto that element, for example an invoice card.

Our promise

7-day refund policy

If Stamp is materially broken or not as described and we cannot fix it, we refund you in full within 7 days of purchase. See the full refund policy.

Releases

Version history

  • New: the first component. An approval button in plain HTML, CSS and JavaScript that presses down and inks APPROVED, PAID or any word you choose, with a live demo.

Full changelog

Freeno payment needed Get it free