OneTaskBy Tim King · Updated
HTML Email Button Generator
Bulletproof Buttons for Outlook and Gmail
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the HTML Email Button Generator works
An HTML email button is a link styled to look like a button that survives every inbox, including Outlook for Windows. Set the text, link, size, colours and font, and copy bulletproof code with inline styles and a VML fallback, ready to paste into any email template.
Email clients ignore most of the CSS a web page relies on. Gmail strips <style> blocks in some
views, and Outlook for Windows renders email with Microsoft Word, which ignores padding on links,
border-radius and display: inline-block. A button made the normal web way turns into plain
underlined text there.
How the bulletproof HTML email button works
The generated button is an <a> tag with every style written inline: background colour, width,
and a line-height equal to the button height so the text sits in the middle. The whole link is
clickable, not just the words. A table with role="presentation" handles the alignment, because
tables are the one layout tool every email client agrees on.
The Outlook VML fallback
Inside an <!--[if mso]> comment, which only Outlook for Windows reads, a VML v:roundrect draws
the button as a shape with rounded corners, a fill colour and the link. The normal link carries
mso-hide: all, so Outlook shows only the VML version and other clients show only the HTML one.
Switch it off if your email tool rejects VML.
FAQ
Why does my email button look square in Outlook?
Outlook for Windows ignores border-radius on HTML elements. The VML fallback fixes this: the
arcsize attribute rounds the corners of the shape. Keep the fallback on to get rounded buttons
in Outlook 2016, 2019, 2021 and Outlook for Microsoft 365 on Windows.
Can I use a web font on an email button?
Only some clients load web fonts, including Apple Mail and iOS Mail. Gmail and Outlook fall back to the next font in the stack. That is why the generator uses email-safe fonts like Arial and Georgia, which look the same everywhere.
Why use a fixed width instead of padding?
Outlook ignores padding on links, so a padded button would shrink to the size of its text. A fixed width and line height give the same size everywhere. Leave room for longer text, because the button does not grow to fit it.
How do I track clicks on the email button?
Most email platforms rewrite links to track clicks automatically. To see email traffic in your
web analytics as well, add UTM parameters such as utm_source=newsletter and
utm_medium=email to the link before you paste it in.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Newsletter Form Builder
Email signup forms with inline or stacked layouts and consent checkbox.
Email Validator
Check a list of email addresses for syntax errors and likely typos.
UTM Campaign URL Builder
Build correctly encoded UTM campaign links with consistent naming.
Copy To Clipboard Button Generator
Copy to clipboard button for code blocks, inputs or fixed text.
HTML Validator
Find unclosed tags, duplicate ids and bad nesting in pasted HTML.