DEV Community

loading...
Cover image for How to create an HTML button that acts like a link?

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

courseprobe profile image Course Probe ・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


Other Dev posts:

Discussion (7)

pic
Editor guide
Collapse
adam_cyclones profile image
Adam Crockett

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?

Collapse
ricobrase profile image
Rico Brase

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!

Collapse
hxii profile image
Paul (hxii) Glushak

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

Collapse
courseprobe profile image
Course Probe Author

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

Collapse
adam_cyclones profile image
Adam Crockett

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.

Thread Thread
link2twenty profile image
Andrew Bone

These are probably the best ways to use a button as an anchor with the former being best.

Thread Thread
adam_cyclones profile image
Adam Crockett

Sorry my friend it's not valid HTML5 according to the HTML5 Spec Document from W3C:

html.spec.whatwg.org/multipage/tex...

Still works I guess