HTML - Create a button that goes to a link

HTML - Create a button that goes to a link

Button, HTML

Learning how to create an HTML button that acts like a link is surprisingly difficult for those new to web programming. Let's create an HTML button that links to another page and explain what exactly is needed for this implementation. The tricky part is that an HTML button is typically nested within a form and its job is to either submit the form or reset the form. But here we actually want the button to act as an anchor tag or a link that navigates the user to a different page.

Creating an HTML button that acts like a link

Let's assume we have a page where we need our button element to actually send the user to another page. This is atypical as a button would normally submit the form, meaning the client will post the data to the server. Those familiar with ASP could reference the button's typical behavior as a post back. To alter this behavior we can leverage the button elements onclick event or use some vanilla HTML. Have a look below to see some examples.

Form button implementation

In the example below you can see that we have a form which submits the form data to the myForm form-handler. This is a perfectly fine implementation, but what if we want to navigate when the user pushes "Go" rather than submit the form?

<form action="/myform">
    <input type="submit" value="Go" />
</form>

HTML button implementation

Using the same example as above, let's now redirect the user to https://www.systemoutofmemory.com when they push "Go" rather than submitting the form. To do this we simply change the form-handler which was myForm previously, to the URL that we want to navigate to:

<form action="https://www.systemoutofmemory.com">
    <input type="submit" value="Go" />
</form>

JavaScript button implementation

Open button in same window

To use JavaScript to change the buttons behavior we will need to leverage the GlobalEventHandlers.onclick EventHandler. Below you can see that we changed the input type to button and wired up the onclick event. Now this will navigate our browser to the page without posting the form.

<form action="/myForm">
    <input 
type="button"
onclick="location.href='
https://www.systemoutofmemory.com'" value="Go" />
</form>
Open button in new window

Sometimes we may want to open the link in a new window or tab. This can be done by using the Window.open() method. Check out our example below updated to open the button in a new window:

<form action="/myForm">
    <input 
type="button"
onclick="window.open('
https://www.systemoutofmemory.com','_blank')" value="Go" />
</form>

Styling the button

One of the common issues when using an input as a button is that it simply does not look correct. This can be remedied using the following CSS: 

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

    text-decoration: none;
display: inline-block; color: initial; }