HTML button thats opens link in new tab-CodePudding

Here is what I am trying to do.

I want to set up an HTML button that will open a link https://example.com in a new tab.

I have a button set up here. I can use JS, CSS, HTML, and everything else.

CodePudding user response：

You can do it by a JS function, just like this

<button onclick="openExampleTab()">
  Open my Tab
</button>

<script>
    function openExampleTab() {
       window.open("https://example.com", "_blank");
    }
</script>

Or you can use anchor tag with the href attribute pointing to your page:

<a href="https://example.com" target="_blank">Open my tab</a>

CodePudding user response：

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"));

CodePudding user response：

a {
  background: #0a95ff;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  text-decoration: none;
}

<a href="https://example.com">Example</a>