devise一个锚点标签，看起来像一个提交button
我有一个表单有一个“提交”button和一个“取消”锚点。 HTML是这样的：
<input type="submit" value="Submit" /> <a href="some_url">Cancel</a> 我希望这两个看起来和行为相同。 没有什么奇特的，就像StackOverflow中的“Ask Question”锚点看起来一样。
我可以看到两个看起来有些相似，边框，背景颜色和hover的背景颜色，但我不能很好地获得高度和垂直alignment互相玩好。 我会发布我的CSS，但是现在这样的混乱，我认为从头开始，让一个准系统的CSS布局工作，然后从那里继续，可能会更容易。
PS我知道我可以使用一个锚而不是挂钩onClick事件做redirect。 现在几乎是一个原则问题，现在要使用锚来正确使用（此外还有需要考虑networking蜘蛛的注意事项）。
你可以用简单的样式得到最好的结果是：
.likeabutton { text-decoration: none; font: menu; display: inline-block; padding: 2px 8px; background: ButtonFace; color: ButtonText; border-style: solid; border-width: 2px; border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; } .likeabutton:active { border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; }
（可能有某种修复措施来阻止IE6-IE7将焦点button视为“活动”）。
尽pipe如此，这不一定会看起来像本地桌面上的button。 事实上，对于许多桌面主题，将不可能在简单的CSS中重现button的外观。
但是，您可以要求浏览器使用本机渲染，这是最重要的：
.likeabutton { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; font: menu; color: ButtonText; display: inline-block; padding: 2px 8px; }
不幸的是，正如你可能已经从浏览器特定的前缀中猜到的，这是一个CSS3特性 ，到处都没有支持。 特别是IE和Opera会忽略它。 但是，如果将其他样式包含在备份中，那么支持appearance的浏览器将会删除该属性，而更喜欢明确的背景和边框！
你可能做的是默认使用上面的appearance样式，并根据需要做JavaScript修正，例如：
<script type="text/javascript"> var r= document.documentElement; if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) { // add styles for background and border colours if (/* IE6 or IE7 */) // add mousedown, mouseup handlers to push the button in, if you can be bothered else // add styles for 'active' button } </script>
我希望这将有所帮助。
<a href="url"><button>SomeText</button></a>
我build议你使用input提交/button而不是锚点，并把这一行代码onClick="javascript:location.href = 'http://stackoverflow.com';" 在input提交/button，你想作为链接工作。
提交示例
<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />
button示例
<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>
链接和input是非常不同的东西，用于非常不同的目的。 在我看来，你需要一个button来取消：
<button>Cancel</button>
或者也许是一个input：
<input type="button" value="Cancel"/>
使用一个button标记而不是input，重置它并放置一个跨度，那么您只需要以同样的方式对链接和跨度进行样式设置。 它涉及额外的标记，但它为我工作。
标记：
<button type="submit"> <span>submit</span> </button> <a>cancel</a>
CSS：
button[type="submit"] { display: inline; border: none; padding: 0; background: none; }
为什么不只是使用一个button，并调用与JavaScript的URL？
<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />
HTML
<a href="#" class="button"> HOME </a>
CSS
.button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF; border-radius: 3px; } .button:hover{ background-color: #0066FF;}
观看教程
使用CSS：
.button { display: block; width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; } <a href="some_url" class="button ">Cancel</a>
改变样式您的更改提交button到一个锚标记，并提交使用JavaScript：
<a class="link-button" href="javascript:submit();">Submit</a> <a class="link-button" href="some_url">Cancel</a> function submit() { var form = document.getElementById("form_id"); form.submit(); }
怎么样
<a href="url"><input type="button" value="Cancel"></a>
