Implementing link into HTML/CSS button

Question

I need to add a link into these buttons:

<div class="buttons">
      <button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button>
      <button class="action redbtn"><span class="label">EDIT ACCOUNT</span></button>
      <button class="action greenbtn"><span class="label">IMPORT EDI TEXT FILES</span></button>
      <button class="action"><span class="label">LOG OUT</span></button>
    </div>

Can somebody help me?

What do you mean by you need to add a link into the buttons... a link to what? — Simon Martin, Dec 21 '12 at 12:03
Try the solution in this SO Answer http://stackoverflow.com/a/2906586/96505 — Simon Martin, Dec 21 '12 at 12:07
Is there a specific reason you're not just using an href element and styling it to look like a button with CSS? — Simon Martin, Dec 21 '12 at 12:09
Have a look at this [**sample**](http://jsbin.com/afevex/2/edit) — Mr_Green, Dec 21 '12 at 12:19

Reinder Wit · Accepted Answer · 2012-12-21T12:17:32.007

4

You have several options here, depending on whether you can change the HTML:

If you can change the HTML make the buttons into a regular <a href="http://www....">link</a> or you can add an onclick event:

<button class="action bluebtn" onclick="javascript:document.location='some-url'">
    <span class="label">CREATE NEW ACCOUNT</span>
</button>

If you can't change the HTML, grab the buttons using something like jQuery and add the onclick event there:

$("button.bluebtn").click(function(){
    document.location = 'some-url';
    return false;
});

But I do recommend changing the buttons into regular links if you can. Having <button> elements acting as links makes no sense...

edited Dec 21 '12 at 12:17

answered Dec 21 '12 at 12:11

Reinder Wit

6,490
1
25
36

Making them anchors and styling them like buttons is beat imo – rlemon Dec 21 '12 at 12:14
@rlemon, you are right, I was still busy trying to add that part ;) – Reinder Wit Dec 21 '12 at 12:16

nienn · Answer 2 · 2012-12-21T12:50:34.547

3

If you really need to use the <button> tag you can add the link with Javascript:

<button onclick="location.href='url_address'">Your HTML content</button>

I think it would be more consistent thought to use <a> tags instead of <button>'s and then style them with CSS to look like the buttons. This way you rely on the default behavior of your markup and avoid having to use Javascript.

edited Dec 21 '12 at 12:50

answered Dec 21 '12 at 12:12

nienn

2,130
2
15
21

rOcKiNg RhO · Answer 3 · 2012-12-21T12:20:22.600

0

<input type="button" value="click for google" onClick="window.location='http://w ww.google.com' ">

or you may use

<button onclick="document.location.href='link'; return false;">Link Text</button>

edited Dec 21 '12 at 12:20

answered Dec 21 '12 at 12:14

rOcKiNg RhO

631
1
6
16

score -2 · Answer 4 · answered Dec 21 '12 at 12:08

I think you just wrap the button with a href element like the following:

<div class="buttons">
  <a href="your link here"><button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button></a>
</div>

and do same for rest of the buttons. Wrap them with "a href" tag.

Implementing link into HTML/CSS button

4 Answers4