Lesson 5: Adding a Print Button
In this lesson we find some code on W3School that will enable us to add a print button to our articles. You'll learn how to trigger a basic JavaScript function, how to add and style a button, and where to add your custom scripts in HelpDocs.
Resources
Make Your Printed HelpDocs Look Nicer
Code Snippets
<!-- Print Button JavaScript -->
<script>
function PrintFunction() {
window.print();
}
</script>
<!-- Print Button -->
<div class="print-button">
<button onclick="PrintFunction()">Print This Page</button>
</div>
/* Print Button Margin */
.print-button{
margin: 20px 0;
}
/* Print Button Style */
.print-button > button{
text-transform:uppercase;
padding:10px 20px;
background-color:#FFCD00;
border:none;
border-radius:7px;
color:#000000;
opacity:0.8;
transition:0.2s;
}
/* Print Button Hover Effect */
.print-button > button:hover{
opacity:1;
}
