Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?

Button currently looks like:

<button>Visit Page Now</button>

What I would prefer not to have:

<a href="link.html"><button>Visit Page Now</button></a>

The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.

Looking forward to hearing some options/opinions.

Inline Javascript:

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

Defining a function in Javascript:

<script>
    function visitPage(){
        window.location='http://www.example.com';
    }
</script>
<button onclick="visitPage();">Visit Page Now</button>

or in Jquery

<button id="some_id">Visit Page Now</button>

$('#some_id').click(function() {
  window.location='http://www.example.com';
});

Here's a solution which will work even when JavaScript is disabled:

<form action="login.html">
	<button type="submit">Login</button>
</form>

The trick is to surround the button with its own <form> tag.

I personally prefer the <button> tag, but you can do it with <input> as well:

<form action="login.html">
	<input type="submit" value="Login"/>
</form>

Just do this

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

LINKS ARE TRICKY

Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:

• Ctrl+Click: opens link in new tab
  You can simulate this by using a window.open() with no position/size argument
• Shift+Click: opens link in new window
  You can simulate this by window.open() with size and/or position specified
• Alt+Click: download target
  People rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
  
  

EASY WAY OUT

Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,

#btn {
  background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
  display: block;
  width: 128px;
  height: 128px;
  border: none;
  outline: none;
}

<a href="btnlink.html" id="btn"></a>

You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.

Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.

(actually, forget the second solution - if you can't use a form, the submit button is out)

<form action="portfolio.html">
 <button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>

I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/

<button id="x">test</button>

$('#x').click(function(){
    location.href='http://cnn.com'
})

Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:

document.getElementById("Button").addEventListener("click", gotoUrl);
    
function gotoUrl() {
       window.location.assign("https://www.google.com/");
    }

Now the button will lead you to Google!

For more info: https://www.w3schools.com/js/js_window_location.asp