HTML Button Opening Link in New Tab

Opening a new tab on button click

Attribute href not allowed on element button instead of adding href just use data-href in HTML and in JavaScript just change this.href to this.getAttribute('data-href') as shown below:

<div class="text text-left">
    <h2>WORK</h2>    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>
    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>
    <button data-href="https://www.behance.net" onclick="window.open(this.getAttribute('data-href')); return false;">View Project</button>
</div>

How do I make a button act like a link but on a new tab?

The following line of code won't work because you're not quoting it properly:

<button type="button" onclick="window.location.href = 'https://www.typing.com' target = '_blank'">Typing.com</button>

For starters, this isn't valid JavaScript.

window.location.href = 'https://www.typing.com' target = '_blank'

You haven't defined a variable called target and you're supposed to put semi-colons after assignments.

I think you meant to write this instead:

<button type="button" onclick="window.location.href='https://www.typing.com'" target="_blank" id="myButton">typing.com</button>

Even if you change it to that, it won't work as expected because you can't use an anchor tag's target attribute on a button and you can't set it using an assignment to window.location.href.

If you must use inline scripting, use the window.open function, then add a second argument ("_blank"), like this:

<button type="button" onclick="window.open('https://www.typing.com', '_blank');" id="myButton">typing.com</button>

If you're trying to make a button behave like an anchor tag using inline scripting, why not use an actual link and style that like a button instead?

Set the anchor tag's target attribute to _blank, like this:

<a href="https://www.typing.com" target="_blank" class="button">Typing.com</a>

Here are some basic styles for a (blue) button:

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  background-color: #03A9F4;
}

If you want to go down the JavaScript route, ignore the first two methods and just add a click event to your button elements, like this:

document.querySelector(".button").addEventListener("click", () => {
  window.open("https://www.typing.com", "_blank")
});

Notes and information:

the _blank argument is required for it to open in a new tab.
you have to use a for (or forEach) loop to add the click event to each button.
your "link" won't work if the user is has a popup blocker (extension) installed.

Good luck.

Button to open link in new tab

In addition to the other answers, add "_blank" to open in a new tab if you intend on using a JavaScript function.

function AsDownload() {  //window.open(pathString, target);  window.open("https://alexanderhawking.itch.io/asteroid-racer", "_blank");};

<button id="AsDownload" onclick="AsDownload()">Download</button>

Javascript - Open a given URL in a new tab by clicking a button

Use this:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

Worked for me and it will open an actual new 'popup' window rather than a new full browser or tab. You can also add variables to it to stop it from showing specific browser traits as follows:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

How do I create an HTML button that acts like a link?

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You'd intuitively expect to be able to use <button href="https://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Or pick one of those many CSS libraries like Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Instead of <input type="button"> in above example, you can also use <button>. The only difference is that the <button> element allows children.

HTML button thats opens link in new tab

Just use anchor tag instead.

<a href="https://example.com" target="_blank">Click Here</a>

For navigation just use anchor tags, Feel free to style it as a button and let it use it's href attribute well, Only use button when it represents a real button, Such as (Play, Pause, Start..etc)

If you insist, Just use the window.open function

button.addEventListener("click", () => window.open("https://example.com", "_blank"));

Open link in a new tab when button is clicked

UPDATED CODE

Add a target="_blank" attribute

<Button
  target="_blank"
  href="https://play.google.com/store/apps/dev?id=6411367502435954294"
  type="primary"
  content="Play Store quot;
>
  {/*some code*/}
</Button>;

import styles from "./button.module.scss";

/* Include additional prop target in your button component */

const Button = ({ content, icon, type, href, target }) => {
  return (
    <>
      <a
        target={target}
        className={`${styles.button} ${
          type === "primary" ? styles.primaryButton : styles.secondaryButton
        }`}
        href={href}
      >
        <i className={`fas fa-${icon}`}></i>
        {content}
      </a>
    </>
  );
};

export default Button;