Button Appearance

Six arrangements of one button. Whichever you pick, it is built from real page elements rather than an image, so it takes on the font and color of whatever sits around it.

The Six Arrangements

Three sets of actions, each with or without words beside the icons. Pick in the builder; these are exactly what you get.

PrintPDFEmailPrint, PDF and Email, with words
Print, PDF and Email, icons only
PrintPDFPrint and PDF, with words
Print and PDF, icons only
PrintPrint only, with words
Print only, icon only

Turning an action off in your settings does not remove it from the button. Pick the arrangement that shows only what you want offered, so your readers are never shown a control that will not do anything.

Why It Looks Like Part of Your Site

The button automatically matches your site's own text color and font, with nothing to set up. On a serif recipe site it comes out serif. On a dark page it comes out light.

This is why it is code rather than an image. An image cannot see the page it lands on, so it would look pasted on somewhere, however carefully it was drawn.

Changing the Words

The labels are plain text in the code you pasted. Edit them. The only part that must stay is the click handler on the link.

Translating the labels

<span>Print</span>   →   <span>Imprimir</span>
<span>PDF</span>     →   <span>PDF</span>
<span>Email</span>   →   <span>Correo</span>

The words ship in English because they are read by your readers on your site, and the language you happen to browse us in is a poor guess at what they speak. If you would rather carry no language at all, pick one of the icons-only arrangements.

Restyling It

Everything about the button's resting appearance is set inline, so your own stylesheet needs !important to override it. That is deliberate: it is what stops a stray a { background: … } rule on your site from wrecking the button.

Your stylesheet

.pf-print-btn {
  border-radius: 0 !important;
  border-color: #c00 !important;
  font-size: 1rem !important;
}

You can also simply edit the inline styles in the code you pasted, which is easier to reason about for a one-off change.

Common Questions

Can I use my own image instead?#

Yes. Replace everything between the opening and closing <a> tags with your own image, and leave the link and its click handler alone.

<a href="https://www.printfriendly.com" class="printfriendly"
   onclick="window.print();return false;" title="Printer friendly version">
  <img src="/images/my-print-button.png" alt="Print this page">
</a>

The trade-off is the one above: an image cannot follow your page's color or dark theme, so you will be maintaining it yourself.

Can I move the button, or have it follow the page?#

It sits in the flow of your text, like a word or a link, so put it wherever you like and position it with your own CSS. A sticky or floating button is a wrapper around the code with your own positioning on the wrapper, not a setting here.

The button does not highlight when I hover over it#

The small <style> block from the code was stripped by your CMS. Only the hover and focus effects live there, so everything else still works. Move those two rules into your own stylesheet if you want them back.

Can I trigger PrintFriendly from an ordinary text link?#

Yes. Any element that calls window.print() will do it once the script is on the page, because the script takes that call over. A plain link with onclick="window.print();return false;" is enough.

Is it accessible?#

It is a real link, reachable by keyboard, with a visible focus ring and a descriptive title. The icons-only arrangements carry an accessible name so a screen reader announces what they do; the labeled ones use the words themselves, so nothing is read twice. On touch screens it grows to a 44px target.

Can I track clicks?#

Add your own handler to the link alongside the existing one. Keep the window.print() call, or the button stops working. See also the settings reference.