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.
精彩评论