How to create an HTML button that acts like a link?

#codenewbie #tutorial #webdev #html

Course Probe Nov 17, 2020 ・3 min read

In this short tutorial, let’s create some magic behind html button links, in this way we are going to create basic html buttons that work as href or links.

Depending on the application you are building it’s better to have html hyperlink button or add a link to a button to improve the user experience and specially for mobile apps where a button is easier to click or tap than a plain anchor link.

Example 1:

HTML

The plain HTML way is to put it in a

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 in above example, you can also use

You’d intuitively expect to be able to use

CSS

If CSS is allowed, simply use an which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

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

Or pick one of those many CSS libraries like Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Instead of in above example, you can also use

Example 2:

As of HTML5, buttons support the formaction attribute. Best of all, no Javascript or trickery is needed.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Caveats

Must be surrounded by
tags.
Overrides the default action in a form. In other words, if you do this inside another form it’s going to cause a conflict.

Reference links:

Additional Resources:

Build Responsive Real World Websites with HTML5 and CSS3

Web Design for Everybody: Basics of Web Development & Coding

Discussion (7)

Adam Crockett • Nov 17 '20

Do you know that this is bad practice? In the world of accessibility, a button that acts like a link is going to be read out as a button to screen reader users and so the expectation of navigation is completely absent. Therefore it's better to have a link act like a link and a button act like a button.

The title says button that acts like a link but the code says style a link like a button?

Rico Brase • Nov 17 '20

This.

Use a button for actions (save, delete, edit, etc. with corresponding navigation INSIDE of your own application, e.g. navigate to the edit page), but use <a href="https://example.com">Link text</a> for any sort of proper navigation, e.g. external links or internal links to separate parts of your app (user management, article management, etc.).

If you want to, you can style some links with <a href="https://example.com" class="button">I'm a button!</a> and some CSS for the .button rule.

Don't change the intended behaviour of elements to make them fit - change their look!

Paul (hxii) Glushak • Nov 17 '20

This. Links should stay links, and buttons should stay buttons.

Course Probe • Nov 17 '20

What do you think about Example 2 ? Would you have suggestions for a different approach ?

Adam Crockett • Nov 17 '20

Okay so theres a few issues with Example 2.

The form action attribute as I have read it in HTML5 spec (this is not a common attribute 🦄), This is designed to give a <form> the ability to POST to several different urls - an unusual case but anyway such is the way of the web. A button hacked into a link in this way will not be counted towards SEO is another reason not to use this method.

The solution to navigation is the idiomatic <a href=""/> anchor and thats it really. There is then no need to have a style to make a button look like a link.

If you can give me a use case I can try illustrate it more clearly.