How to make a button that opens in a new tab?

November 27, 2020

For now, the only way to have in-app links / buttons open in a new tab is to create your own link / button with an HTML element.

How it works

Add an HTML element to your Page Block:

Write your own HTML link / button.

Here is a stripped down HTML link that opens in a new tab: 

<a href="LINK GOES HERE" target="_blank">Link text</a>

It is this attribute (target="_blank") that causes the link to open in a new tab.

Here is a version of an HTML link that is styled to look like a button: 

<a href="LINK GOES HERE" target="_blank" style="width:100%;display:block;text-align:center;padding:.5em;background-color:#0073e2;color:#fff;border-radius:4px;box-shadow:0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);text-decoration:none">Click here</a>

Everything in the style attribute (style="...") is CSS.

Hire an Afterpattern expert

Go from idea to launch in weeks.

View services