Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML button opening link in new tab

Tags:

html

web

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.

like image 858
RDR Avatar asked Dec 04 '15 06:12

RDR


People also ask

How to open a link in a new tab in JavaScript?

JavaScript is beautiful! If you want to open a link in a new tab –the easiest way is to use target attribute of ANCHOR element in HTML. Here is how you need to do it. Tip 1: Here the target attribute is set to _blank. This value opens a new tab/window.

How to have in-app links open in a new tab?

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. Write your own HTML link / button. It is this attribute (target="_blank") that causes the link to open in a new tab.

How do I open a new tab with a button?

To open a new tab with a button you just have to choose any of these options: Use '_blank'. It will not only open the link in a new tab but the state of the original webpage will also remain unaffected.

How to add a link to an HTML button?

There are several ways to create an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to an HTML button. 1. Add inline onclick event. to HTML <button> tag within HTML <form> element. It might not work if the button is inside a <form> tag.


Video Answer


3 Answers

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

like image 61
ngLover Avatar answered Oct 04 '22 19:10

ngLover


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.

like image 39
EstevaoLuis Avatar answered Oct 02 '22 19:10

EstevaoLuis


You can also add this to your form:

<form action="https://www.google.com" target="_blank">
like image 14
Pavel Chernikov Avatar answered Oct 02 '22 19:10

Pavel Chernikov