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;} 

观看教程

https://youtu.be/euti4HAJJfk

使用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>