How to create an HTML button that acts like a link

Question

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

I would also like it so there aren't any extra characters, or parameters in the URL.

How can I achieve this? Have shared my code below:-

<form method="get" action="/page2"> 
        <button type="submit">Continue</button>
</form>

but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL. There are two other solutions to do this: Using JavaScript or styling a link to look like a button.

Using JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Answer 1

To answer your doubt, 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 the above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You will then 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. If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property

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

}

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 the above example, you can also use <button>. The only difference is that the <button> element allows children.