How to create an HTML button that works as a link?

NOTE: You already have an answer with many options, I'm going to put one that is similar to what you already have but focusing on the part " And I would like it to be as accessible as possible. "

Links and buttons have different functionality: links connect to other content, while buttons will be associated with actions (they don't have to redirect anywhere or connect to anything).

Considering accessibility, it is not recommended to change a button to function as a link . In fact, that is the same suggestion that is made from W3C (my translation):

Warning: when using HTML, use the <a>. It is not recommended that authors repurpose other elements to create links.

Not only is it semantically inconsistent, it can also lead to problems depending on the method you follow to implement it. For example, if the user has JavaScript disabled (rare in browsers, not so rare in some screen readers), some of the methods described in the Wiki answer won't work directly.

That's why, from an accessibility point of view, the best way to create a button that works like a link is to use a link and style it to look like a button:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button class="btn btn-success">¿Soy un botón o un enlace?</button>
<a href="#" class="btn btn-success">¿Soy un botón o un enlace?</a>

If despite this recommendation you want to use a button as if it were a link, you can use any of the methods described above... But to make it accessible, you must tell the browser (or screen reader) that this button is not really a link. button but a link and that you should treat it as such. For this you must userole="link" .

With role="link"you are indicating that the behavior of that element will be similar to that of a link . So you could have something like this:

.enlace {
  display:inline;
  border:0;
  padding:0;
  margin:0;
  text-decoration:underline;
  background:none;
  color:#000088;
  font-family: arial, sans-serif;
  font-size: 1em;
  line-height:1em;
}

.enlace:hover {
  text-decoration:none;
  color:#0000cc;
  cursor:pointer;
}

<button class="enlace" role="link" onclick="window.location='http://es.stackoverflow.com'">¿Soy un botón o un enlace?</button>
<a class="enlace" href="http://es.stackoverflow.com">¿Soy un botón o un enlace?</a>

Answer copied from here

HTML

The plain HTML way to do this is to specify the destination URL in an <formulario>as an attributes action ( action).

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set the CSS display: inlinein the form to maintain the flow of the surrounding text. Instead of using <input type="submit">in the example above, you can use <button type="submit">. The only difference is that this element allows children.

One intuitively expects to be able to use <button href="http://google.com">with the element <a>, but unfortunately, this attribute does not exist according to the HTML specification .

CSS

If you can use CSS, just use a <a>with the style to make it look like a button using other appearance properties (only IE supports it (as of July 2015) and it's 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 use one of the many CSS libraries like bootstrap .

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

javascript

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

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

Answer copied from here

If what you want to achieve is the basic appearance of the button in plain HTML, inside an anchor ( <a>) tag, then you can use the Twitter Bootstrap framework to format any of the following regular HTML buttons/links as if it were a button. There are slight differences between versions of this framework, keep that in mind.

<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 (v2) display example:

Bootstrap (v3) display example:

See Bootstrap (v2) or Bootstrap (v3) in the buttons section for some examples.

If what you want to do is an html link with the appearance of a button, that can be easily achieved by giving a css class to the link in question, let me explain:

To give it a finished look I recommend using the Bootstrap style libraries, placing the Bootstrap cdn in the head of your page (the cdn is a connector that allows you to consume the libraries without physically having them in your project, you must be connected to the internet to be able to use the styles, this is important!).

Subsequently, create any link and add a class to it, Bootstrap has many, the class for buttons is btn, in its different guises btn-success, btn-warning, btn-danger, among others.

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
      crossorigin="anonymous">

<a href="https://google.com" class="btn btn-success"> Ir a Google !</a>

I hope I have helped. Success with your project!