Add Hyperlink as Button on the Advanced PDF/HTML

Scenario

By default, the use of the <button> tags is not applicable for the Advanced PDF/HTML template and suggested to use hyperlinks.

However, coding the CSS Style of the hyperlink can make it look like a button on the print out.

Solution

  • Navigate to Customization > Forms > Advanced PDF/HTML Templates
  • Preferred Advanced PDF/HTML Template: Click Edit
  • Source Code: Add the CSS style on the Hyperlink
a.buttonlink:link, a.buttonlink:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.buttonlink:hover, a.buttonlink:active {
background-color: red;
}
<a href= "https://www.google.com " target="_blank" class="buttonlink">Google Link</a>
  • Click Save

Leave a comment

Your email address will not be published. Required fields are marked *