HTML button opening link in new tab

Question

So this is the simple code for the button to open a certain link

                <button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>

but it opens it on the same page, I want the link to open on a new tab though.

Solution 1

You can use the following.

window.open(
  'https://google.com',
  '_blank' // <- This is what makes it open in a new window.
);

in HTML

 <button class="btn btn-success" onclick=" window.open('http://google.com','_blank')"> Google</button>

plunkr

Solution 2

With Bootstrap you can use an anchor like a button.

<a class="btn btn-success" href="https://www.google.com" target="_blank">Google</a>

And use target="_blank" to open the link in a new tab.

Solution 3

You can also add this to your form:

<form action="https://www.google.com" target="_blank">

Solution 4

Try using below code:

<button title="button title" class="action primary tocart" onclick=" window.open('http://www.google.com', '_blank'); return false;">Google</button>

Here, the window.open with _blank as second argument of window.open function will open the link in new tab.

And by the use of return false we can remove/cancel the default behavior of the button like submit.

For more detail and live example, click here

Solution 5

Use '_blank'. It will not only open the link in a new tab but the state of the original webpage will also remain unaffected.

View more solutions