Making a <button> that's a link in HTML

0 votes
asked Jul 27, 2010 by akor

Basically, I like the way that <input type="submit"> is styled, with the clickable button when you add a little CSS. However, regular buttons are not styled as such, they have no such clickability without some major CSS or JS, and you have to use images.

I made submit buttons into links, by using the form action, but this requires me to make a new form for each button. How can I find a happy medium? Using multiple forms is causing problems in my styling that I can't seem to fix unless I find another way to make buttons that are links in HTML, that have a default style that makes them have a pressed state (and I don't mean browser default settings).

Any ideas?

4 Answers

0 votes
answered Jul 27, 2010 by thomasrutter

You have three options:

  • Style links to look like buttons using CSS.

    Just look at the light blue "tags" under your question.

    It is possible, even to give them a depressed appearance when clicked (using pseudo-classes like :active), without any scripting. Lots of major sites, such as Google, are starting to make buttons out of CSS styles these days anyway, scripting or not.

  • Put a separate <form> element around each one.

    As you mentioned in the question. Easy and will definitely work without Javascript (or even CSS). But it adds a little extra code which may look untidy.

  • Rely on Javascript.

    Which is what you said you didn't want to do.

0 votes
answered Jul 27, 2010 by edeverett
<a href="#"><button>Link Text</button></a>

You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.

Demo:

<a href="http://stackoverflow.com"><button>Link Text</button></a>
0 votes
answered Jul 27, 2010 by nealv

The 3 easiest ways IMHO are

1: you create an image of a button and put a href around it. (Not a good way, you lose flexibility and will provide a lot of difficulties and problems.)

2 (The easiest one) -> JQuery

<input type="submit" someattribute="http://yoururl/index.php">

  $('button[type=submit] .default').click(function(){
     window.location = $(this).attr("someattribute");
     return false; //otherwise it will send a button submit to the server

   });  

3 (also easy but I prefer previous one):

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">

$fn.somefunction= function(url) {
    window.location = url;
};
0 votes
answered Jul 6, 2012 by jared

A little bit easier and it looks exactly like the button in the form. Just use the input and wrap the anchor tag around it.

<a href="#"><input type="button" value="Button Text"></a>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...