Lesson 5: Adding a Print Button

Matt Bradford-Aunger Updated by Matt Bradford-Aunger

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;
}

How did we do?

Lesson 4: Change the Feedback Icons

Lesson 6: Adding a Custom Image Background Header

Contact