If you're looking to create an HTML button that acts like a link (i.e. clicking on it takes you to a custom specified link), here are some of the options that are available in HTML/CSS:
Using the Inline onclick
Event
We can simply use onclick
event on an HTML button element. For example:
<button onclick="window.location.href = 'link.html';">Link</button> <input type="button" onclick="window.location.href = 'link.html';" value="Link" />
Some of the downsides of using this approach might be:
- Won't work when JavaScript is disabled.
- To open a link in a new tab/window requires extra bit of coding.
- Browser won't interpret it as a standard link, making it difficult to copy it to clipboard for sharing.
- Some search bots might ignore the link, making it bad for SEO.
Using HTML Form Submit Button
Using Form Element's action
Attribute:
An HTML button wrapped inside a form
element with the action
attribute specified works as well:
<form action="link.html" method="get" target="_blank"> <button type="submit">Link</button> </form>
Some of the downsides of using this approach might be:
- Although it validates as valid markup, it may not always be semantically correct because we're not submitting form data (which is what it's telling the browser it's meant to do code-wise) but instead it's being used as a link.
- Submitting with
GET
will leave a trailing?
at the end of the resulting URL. - Requires an extra
form
element.
Using HTML5 formaction
Attribute:
Using the new HTML5 formaction
attribute on the button
element:
<form> <button type="submit" formaction="link.html">Link</button> </form>
The downsides of using this approach are the same as above with an addition that it's HTML5-specific so support for old browsers might be poor.
Using a Link Styled as an HTML Button
We can mimic the appearance of the browser's default styling of an HTML button on an HTML link element:
HTML:
<a href="link.html" class="button">Link</a>
CSS:
a.button { display: inline-block; box-sizing: border-box; margin: 0; padding: 1px 6px; font: 13.3333px Arial; text-rendering: auto; text-align: center; text-transform: none; text-decoration: none; text-indent: 0; text-shadow: none; letter-spacing: normal; word-spacing: normal; color: buttontext; border: 2px outset buttonface; border-image: initial; background-color: buttonface; -webkit-appearance: button; -moz-appearance: button; appearance: button; cursor: default; } a.button:active { border-style: inset; }
Some of the downsides of using this approach might be:
- Browser support for the CSS appearance property might be limited.
- Requires complex styling to get default button styling (which may work only on certain browsers).
- Poor accessibility — does not trigger a click event when space bar is pressed on an active link.
Overlaying an Invincible Link on an HTML Button Element
An empty link can overlay an HTML button to keep the default appearance whilst allowing to treat it as a link:
HTML:
<div class="lnkButton"> <a href="link.html"></a> <button>Link</button> </div>
CSS:
.lnkButton { display: inline-block; position: relative; } .lnkButton > a { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; cursor: default; } .lnkButton > a:active + button { border-style: inset; } .lnkButton > button { position: relative; z-index: 1; }
Some of the downsides of using this approach might be:
- Uses an empty anchor tag.
- Requires an extra parent container element.
- Button
active
(and other) state styling might have to be done manually and may not resemble default active button styling 100%. - Poor accessibility — does not trigger a click event when space bar is pressed on an active link.
Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.