Email button generator

How the button gets into your email

A copy can carry more than one version of the same thing. Copy button puts two on your clipboard: the button as formatted text, and its label and link as plain text. An editor that takes formatted text, as the editors of mail apps do, uses the first: what you paste is the button, drawn, with its link, and not a block of code.

• Open the message you are writing.
• Click where the button should go.
• Paste, as you would paste a word.

A place that takes no formatting, such as a plain-text email or a chat box, receives the label and the address instead. An editor may also keep only part of a pasted style: look at the button once in your message before you send it. Copy HTML gives you the markup itself, for a newsletter tool, a template or a signature editor that has a field for code.

Why it is built so plainly

An HTML email keeps very little of what styles a web page: no style sheet or web font you can count on, no scripts. So the button is a single link, and everything that draws it (its color, its space, its corners, its font) is written on the link itself. That is the form mail apps keep best.

The fonts are ones that most computers already have, each followed by a similar one for a device that lacks it. And the button is text, not a picture: it stays sharp at any size, a screen reader reads its label, and it still shows where pictures are blocked.

How mail apps draw it

The classic desktop Outlook for Windows draws messages with the engine of Word, which honors padding on a table cell and not on a link. If your readers use it, choose A table under More options: the space is then on a cell, and the corners are square. In that form the label is the link, not the colored area around it.

What dark mode does to it

A mail app in dark mode decides for itself what to do with your colors. Some darken their own page and leave the message as it was sent. Some also darken light backgrounds and lighten dark text. Some invert every color. The three dark views show each of these on your button, with the contrast of its label in that view; they are simulations of the behavior, since every app applies its own rules.

• The further apart the label and the button are in lightness, the better they hold: white on a very dark color, or black on white, stays readable when an app inverts them. White on a middle tone can fall short.
• A black or very dark button can lose its edge on a dark page: a thin lighter border keeps its shape.
• A white button with dark writing is the one most often inverted, since light backgrounds are the first thing a dark mode changes.

A label people can read

The contrast under the preview is the ratio the accessibility guidelines (WCAG) measure between the label and the button, in the view you are looking at. Body-size text needs 4.5:1; large text, from 24 px, or from about 19 px when bold, needs 3:1. For a pair of colors you want to study further, there is the contrast checker.

Sending a campaign? Build the link with the UTM builder first, then paste it here: your analytics will then say which email the visit came from.