Categories
anchor button html hyperlink

How do I create an HTML button that acts like a link?

2464

How do I create an HTML button that acts like a link? So that clicking the button redirects the user to a page.

I want it to be accessible, and with minimal extra characters or parameters in the URL.

11

  • 63

    Change GET to POST. Nobody seems to have addressed the OP’s first problem, which was the ? on the URL. This is caused by the form being type="GET", change this to type="POST" and the ? at the end of the URL disappears. This is because GET sends all variables in the URL, hence the ?.

    – redfox05

    Feb 18, 2016 at 17:20

  • 15

    @redfox05 This works in a context where you are not strict about which method you accept for your pages. In a context where you reject posts on pages that are expecting GET it will fail. I still think that using a link make sense with the caveat that it will not react to “spacebar” when active like button does. Also some style and behavior will be different (such as draggable). If you want the true “button-link” experience, having server side redirects for URL finishing by ? to remove it might be also an option.

    May 15, 2016 at 15:49

  • 5

    cssbuttongenerator.com might come in handy if you want to create a button with css.

    – snow

    Sep 2, 2016 at 0:29

  • 5

    I think it is better iade to create a link that looks like a button

    – yasar

    Jul 24, 2018 at 13:56

  • 10

    Just a note, for me “button acts like link” means, that I can do right-click and decide whether to open in new tab/window, which is not working with JS solutions…

    – Betlista

    Dec 4, 2018 at 10:33

2632

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="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 <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="https://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 (it’s only not supported in Internet Explorer).

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
<a href="https://google.com" class="button">Go to Google</a>

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 <input type="button"> in above example, you can also use <button>. The only difference is that the <button> element allows children.

24

  • 105

    Simple and nice. A fine solution. Add display: inline to the form to keep the button in the flow.

    – Pekka

    May 25, 2010 at 16:44


  • 15

    in safari, this adds a question mark to the end of the url…is there a way to do it that doesn’t add anything to the url?

    – Andrew

    May 25, 2010 at 20:03

  • 13

    @BalusC Nice solution, but if it is inside some other form (parent form), then pressing this button redirects to address in the parent’s form action attribute.

    – Vladimir

    Feb 4, 2014 at 16:08

  • 124

    Is it just me or is the <button> tag missing an obvious href attribute?

    – user1752532

    Apr 29, 2014 at 9:11

  • 16

    Looks simple and nice, but may have side effects if not considered properly. i.e. creating 2nd form in page, nested form etc.

    Jan 16, 2015 at 13:56

828

<button onclick="location.href="http://www.example.com"" type="button">
         www.example.com</button>

Note that the type="button" attribute is important, since its missing value default is the Submit Button state.

12

  • 17

    It seems that if you don’t specify type=”button” this won’t always work. Looks like the button will default to “submit”

    – kenitech

    Feb 3, 2014 at 19:17

  • 94

    If you want to open the link in a new window/tab use: onclick=”window.open(‘example.com’,’_blank’);”

    – bennos

    Jun 16, 2014 at 11:02

  • 4

    @kenitech correct, according to specs: “The missing value default is the Submit Button state.”

    Jul 20, 2014 at 13:26

  • 9

    but user cannot right click open in new tab, for that to work , u need the anchor tag

    – Irshu

    Nov 25, 2014 at 16:35

  • 12

    Please don’t do this. It breaks so many things such as the right-click context menu for links.

    – Navin

    May 5, 2018 at 23:57

461

If it’s the visual appearance of a button you’re looking for in a basic HTML anchor tag then you can use the Twitter Bootstrap framework to format any of the following common HTML type links/buttons to appear as a button. Please note the visual differences between version 2, 3 or 4 of the framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) sample appearance:

Sample output of Boostrap v4 buttons

Bootstrap (v3) sample appearance:

Sample output of Boostrap v3 buttons

Bootstrap (v2) sample appearance:

Sample output of Boostrap v2 buttons

1

  • 56

    Seems a little overkill for styling a single button, no? With border, padding, background, and other CSS effects you can style buttons and links to look similar without bringing over an entire framework. The methodology Bootstrap uses is good, however using Bootstrap seems excessive.

    May 12, 2015 at 21:16