HTML - Create button that acts like a link

Mar 19, 2019

Button, HTML March 19, 2019

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

admin API array async Birthday BookGuide Button bytes c# c# enum to int c# int to enum c# int to string c# iterate dictionary c# loop through dictionary c# outofmemoryexception c# run as admin C++ cast cheatsheet CLASSPATH compare convert int to string Dad Dictionary editor enum exception exit Fathers Day for for loop foreach generic Gift gift guide Git global Guide HTML INNER JOIN int iterate Java java.lang.OutOfMemoryError Javascript jQuery JSON KnockoutJS list loop MERGE nested loop outofmemory PHP PHP Redirect PowerShell programmer gift programmer mugs programmer shirts programmer stickers python python bytes to string python external command python for loop python int to string quit random Redirect repr() shell command SQL SQL Server STDIN STDOUT str() string switch system.outofmemoryexception c# systemoutofmemory type UPDATE variables vi vim _