开发者

Can I make replace an <a> link with an input button?

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开发者_StackOverflow a way then will a search engine be able to follow the link?


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


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.


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.


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


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!" />


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜