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?

Answer 1

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

Answer 2

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.

Answer 3

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

或者你可以使用

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

Answer 4

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.