Home Top Ad

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

Share:

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://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 above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.
You'd intuitively expect to be able to use <button href="http://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only Internet Explorer support is currently (July 2015) still poor).
<a href="http://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="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />


Aucun commentaire