Can I make replace an link with an input button?

Question

I have forms with links and I'd like to style them like buttons. I have been trying many different styles but none seem to look as good as a normal input button.

Is there a way I can just replace the with a button? Would I need to put the inside a ? Also if there is a way then will a search engine be able to follow the link?

Just style your `a` element to look like a button. For instance, read and look at this question and my answer to it: http://stackoverflow.com/q/5628507/405015 - @seler's answer looks to be the same thing, but more nicely styled. — thirtydot, May 24 '11 at 08:42

score 4 · Answer 1 · answered May 24 '11 at 07:41

4

<a href="http://www.stackoverflow.com">
    <input type="button" name="so_link" value="Click me!">
</a>

This will work and give you a "normal" input button. Search engines should also be able to resolve the link as it is a "normal" hyperlink with the usual link text replaced by a button.

answered May 24 '11 at 07:41

s.d

4,017
5
35
65

Laughed because you used the same value as in my example :) – Alp May 24 '11 at 07:46
So why was this downvoted? IMHO it's a workable solution. @Alp: Yea, the instant classic, haha. – s.d May 24 '11 at 07:46

score 2 · Answer 2 · answered May 24 '11 at 07:42

2

Most search engines can't follow <button> or <input> elements.

I would suggest you make keep them as links (<a> elements), just style them as buttons.

answered May 24 '11 at 07:42

colinross

2,075
13
10

But cf. [my answer](http://stackoverflow.com/questions/6107497/can-a-search-engine-follow-button-or-input-elements/6107542#6107542) to [this question](http://stackoverflow.com/q/6107497/731040) concerning indexing of the text within the `` tag. – s.d May 24 '11 at 09:00

score 2 · Answer 3 · answered May 24 '11 at 07:43

2

Try the following CSS:

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

I'd recommend styling the element yourself thought but this should work, not sure about browser compatibility. Otherwise you can make a form with only a button and set the URL as the action parameter.

answered May 24 '11 at 07:43

Karl Laurentius Roos

4,360
1
33
42

Looks like I have many solutions and they all work. I am not sure who to mark as Answered. Can you maybe tell me why you say "I'd recommend styling the element yourself". I did try this and used many different backgrounds, rounded corners and even SVG for IE9. My button style looked "okay" but not great. I much prefer your simple suggestion. Thanks – TonyG May 24 '11 at 08:02
This is probably the most simple solution since it tells the browser to style it like a default button. Minimizing the markup and delivering an excellent result :) – Karl Laurentius Roos May 24 '11 at 09:37

score 1 · Accepted Answer · edited May 24 '11 at 08:22

1

You can use the specific button attribute:

<a href="http://www.stackoverflow.com" style="text-decoration:none">
      <button  label="Press Me" name="so_link">Press me</button>
</a>

DEMO

edited May 24 '11 at 08:22

s.d

4,017
5
35
65

answered May 24 '11 at 07:50

xkeshav

53,360
44
177
245

Thanks everyone for all of your suggestions. I was not sure there was a solution but now I see many solutions. I guess this is the huge advantage of stackoverflow. Maybe this is the best solution so far. It would work with search engines and work in IE. Can anyone see any reason why this might not be the best solution. – TonyG May 24 '11 at 08:23
1

This is definitely the least semantic and invalid use of html depending on DOCTYPE solution you mean :) – colinross May 24 '11 at 09:03
@colinross: Oh, it does depend on the DOCTYPE, but I'm sure that problem's been adequately handled by Maricel A? – s.d May 24 '11 at 10:05
@dlEcho perhaps it's some for of retaliatory downvoting. Don't worry about it - the system usually catches those and will restore your rep (I think). – Vivin Paliath May 27 '11 at 18:15
3

@diEcho Stop asking why people downvote. Nobody owes you an explanation. Downvotes are anonymous by design, and the explanation is right there when you hover over the arrow: Somebody thinks that "this answer is not useful". Move on, and stop letting it bother you. – user229044 May 27 '11 at 18:30

score 0 · Answer 5 · edited May 24 '11 at 07:45

To style the link, you can use CSS 3 rounded corners and/or background images to have it look like a button. Where is the problem?

You can also use an input button as a link naturally. But I'd prefer the tag solution, because it is semantically closer to what you are going to express. Anyway, a button would look like this:

<input type="button" onclick ="window.location.href('http://foo.com')" value="Click me!" />

MisaChan · Answer 6 · 2011-05-24T08:01:38.630

0

if you are after the design of your button, why not try to use an image instead of an input button?

<a href="http://www.stackoverflow.com"><img src="button.jpg" alt="button function" /></a>

this is what i often used in my programs :) and you could design and play with the look of your actual button using adobe photoshop.

edited May 24 '11 at 08:01

answered May 24 '11 at 07:51

MisaChan

279
1
5
15

Add an `alt` attribut to your image. – bfontaine May 24 '11 at 07:55
ooppss sorry forgot about that :P – MisaChan May 24 '11 at 08:00

score 0 · Answer 7 · answered May 24 '11 at 07:55

0

here ou have nice CSS3 buttons i've created some time ago. http://jsfiddle.net/seler/SzAM3/embedded/result/

answered May 24 '11 at 07:55

seler

8,803
4
41
54

it does not look like a standard button at all. – Zo72 Nov 24 '11 at 22:20
it's only example. change css in any way you want. – seler Nov 25 '11 at 08:36

Can I make replace an link with an input button?

7 Answers7

DEMO