Add link to button HTML

Question

I\'m trying to add link to my buttons.

My current HTML codes are below

Answer 1

<a> is the HTML element used for creating links, not <button>, so use an <a> element with an href attribute instead of a <button>.

You can then style it to look at much like a button as you like (although I note that most of the CSS you are applying to your <button> elements is geared at making it look unlike a button. About the only thing you are likely to need to do to it is display: inline-block; text-decoration: none; color: black).

Answer 2

<a href="page.html"><button type="button" class="add your class">Link Name</button></a>

you can style the button with CSS, using image buttons tend to be unresponsive.

Answer 3

You should use a <a></a> tag :

<a href="support.html">Get support</a>

If the only reason you want a <button></button> tag is style, you can easily style <a></a> tag

a {
    display: inline-block;
    text-decoration: none;
    background-color: #eee;
    border: 2px outset #ccc;
    color: #000;
    padding: 5px 8px;
    margin: 5px;
}

---

If you absolutly want to use a <button></button> tag you could do it using javascript like so :

<button onclick="document.location.href='support.html';">Get support</button>

Nevertheless, keep in mind that using a button is not proper code, they are not dedicated to links

Answer 4

You can go with this method to create a link-able button if you like.

<form method="get" action="test.html">
    <input type="submit" value="Clickable Button">
</form>

This is not styled though

Answer 5

Apparently your button is intended within table elements, to combine the intended styling and have it function as a link you may want to wrap [the button] a DIV inside of "Anchor" tags (<a>). Below indicates a page called "bikes.html" as the linked element.

<td>
<a href="bikes.html">
<button style="background: url('images/button2.png') 
no-repeat;     background-size:155px; left: 200px; width: 155px; height: 50px; 
border: 0;">Shop Bike
</button>    
</a>
</td>

There are details though about using the <button> tag which may not really be what you want and I usually use <div> tags for this type of thing. But the anchor is what you're missing.

Answer 6

Use the a tag for links. For example :

<a href="/support">Get support</a>

Also, add display:inline-block in the css if you are using the a tag instead of the button tag.