Add link to button HTML

Question

I'm trying to add link to my buttons.

My current HTML codes are below

<td>
  <button style="background: url('images/button1.png') no-repeat; background-size:155px; left: 200px; width: 155px; height: 50px; border: 0;">Get Support</button>

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

How can I add link to other pages for each of those buttons for example... If I click on: Get support button, it will redirect me to the support page which I already created.

score 8 · Accepted Answer · answered Sep 17 '14 at 11:47

8

<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).

answered Sep 17 '14 at 11:47

Quentin

914,110
126
1,211
1,335

+1 Maybe you can add that it can be done using JavaScript, or adding a `
` tag with ``, if the OP wants the same style as the `
– Vucko Sep 17 '14 at 11:55

score 2 · Answer 2 · edited Sep 17 '14 at 11:53

2

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

edited Sep 17 '14 at 11:53

cowls

24,013
8
48
78

answered Sep 17 '14 at 11:50

Katler

507
3
11

You seem to have created a new HTTP Method! Change method to GET and it's a reasonable answer – cowls Sep 17 '14 at 11:51
Well he did mention "html" didn't specify if he wanted to use CSS to style it or use JavaScript to fire it so this is a simple method. No need for the passive aggressive comment – Katler Sep 17 '14 at 11:52
I mean the method attribute on the form should be GET or POST, as in the HTTP methods. LINK is not valid – cowls Sep 17 '14 at 11:52
2

I made a typo, I am sorry, fixed it though – Katler Sep 17 '14 at 11:53
also, all recent specifications of HTML and XHTML specify that tags and attributes should be lowercase. – Woodrow Barlow Sep 17 '14 at 11:53
I think its a reasonable answer now, +1, seems to be getting downvoted to oblivion anyway – cowls Sep 17 '14 at 11:54
1

yeah I rushed it and while reviewing it just went crazy... thanks though – Katler Sep 17 '14 at 11:55
Also, no passive aggression intended! – cowls Sep 17 '14 at 11:56
Can the downvote train pull out of the station and make way for the upvote boat? Simple typo has been fixed. – mikedidthis Sep 17 '14 at 12:03

pistou · Answer 3 · 2014-09-17T12:45:17.223

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

score 2 · Answer 4 · answered Sep 17 '14 at 11:59

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.

answered Sep 17 '14 at 11:59

Regardt Ogies Myburgh

160
1
1
8

score 1 · Answer 5 · answered Sep 17 '14 at 11:47

1

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.

answered Sep 17 '14 at 11:47

shash7

1,719
1
18
20

Jonny Shaw · Answer 6 · 2014-09-17T12:20:56.757

-1

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.

edited Sep 17 '14 at 12:20

answered Sep 17 '14 at 11:59

Jonny Shaw

117
10

1

HTML forbids `button` elements inside `a` elements. – Quentin Sep 17 '14 at 12:01
interesting, I tested it and it did appear to work though the cursor remained an arrow, not a pointer which is why I suggested using a div instead. What about it is actually "forbidden"? – Jonny Shaw Sep 17 '14 at 12:08
thank you for your answer, i just googled HTML rules and you can nest – Pé Bin Sep 17 '14 at 12:09
Good to know Pé Bin. I'm sick over constantly getting points taken away for attempting to help people here. Seems that so many are quick to downgrade and IMO they're abusing the power. If someone's answer is off-topic or flaming hatred is one thing but being chased away for technicalities doesn't strike me as in the spirit of stack. I need some positive points! I looked at w3 and couldn't find anything explicit forbidding button elements in a elements and even suggested in my answer that it wasn't my preference for this solution. – Jonny Shaw Sep 17 '14 at 12:15
2

I am sorry you feel the downvote is harsh, but its not valid markup: http://stackoverflow.com/a/6393863/2312574 – mikedidthis Sep 17 '14 at 12:24
I appreciate that mikedidthis. More succinctly it's not as much that I think it's harsh, but in many cases inappropriate or used harshly. I want to continue to support stack but sometimes it appears any action will get downvoted, ask a question, lose points, try to help with an answer, lose points. Comments and links can be MUCH more helpful especially to people just getting started here. – Jonny Shaw Sep 17 '14 at 12:47
ie. I could reply to quentin's comment above and indicate "As of HTML5 (not yet validated by the way) interactive elements are not allowed, while it may work (for now), this is a good reason to follow the suggestion and use a "div" tag instead. Much better way to add to the dialog and move the community forward. Be different if two answers are competing with 300 or 400 points and you want to favor one over another. But now we're off-topic so I'll stop and hope it makes sense. – Jonny Shaw Sep 17 '14 at 12:53

Add link to button HTML

6 Answers6

Linked

Related