OneTaskBy Tim King · Updated
Print Button Generator
Print Page Button with Print CSS
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 Print Button Generator works
A print button gives visitors a clear way to print a recipe, invoice, itinerary or article. Set the label and colours, choose whether it prints the whole page or one section, pick what to hide and the page margins, and copy the HTML, CSS and JavaScript.
The button calls window.print(), which opens the browser's own print dialog, where visitors can
also save the page as a PDF. The real work is the print stylesheet in the @media print block,
which decides what ends up on paper.
How the print button print CSS works
Inside @media print, the button itself and every selector you list are set to
display: none, so menus, footers and the button do not waste paper. The @page rule sets the
paper margins. With link URLs switched on, each external link gets its address printed after it
in brackets, because a reader cannot click paper.
Printing only one section
In section mode, wrap the content in <div id="print-area">. The print CSS hides everything on
the page with visibility: hidden, shows the print area again, and moves it to the top left of
the first page. Visibility is used rather than display, because a hidden parent with
display: none would take the print area with it.
Test before you publish
Open the browser's print preview after adding the button. Check that images fit the page width,
that dark backgrounds are not wasting ink, and that tables do not split in awkward places. Add
break-inside: avoid to anything that should stay on one page.
FAQ
Can a print button print a PDF instead?
The print dialog already offers "Save as PDF" as a destination in Chrome, Edge, Safari and Firefox, so the same button covers both. Making a PDF file directly, without the dialog, needs a library such as jsPDF or a server-side renderer.
Why are background colours missing from my printout?
Browsers drop background colours and images by default to save ink. Visitors can turn on
"Background graphics" in the print dialog, or you can add print-color-adjust: exact to the
elements whose colours must print, such as coloured table headers.
Can I print a section without the rest of the page?
Yes. Choose "One section", wrap the part to print in <div id="print-area">, and only that part
appears on paper. It still uses the page's own fonts and styles, so it looks the same as on
screen, minus anything you hid.
Does the print button work on phones?
Yes. window.print() opens the share and print sheet on iPhone and Android, where visitors can
send the page to a printer or save it as a PDF. The print CSS applies there too.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Copy To Clipboard Button Generator
Copy to clipboard button for code blocks, inputs or fixed text.
Share Button Builder
Social share buttons for nine networks, with no tracking scripts.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Print Size Calculator
Pixel dimensions to print size at 300 DPI and every quality level.
404 Page Generator
Custom "page not found" HTML page with home link and search.