使用滑动门 CSS 的输入按钮答案

【问题标题】：Input Button Using Sliding Doors CSS使用滑动门 CSS 的输入按钮
【发布时间】：2011-03-09 15:29:08
【问题描述】：

专为<input type="submit" value="Button Name"> 等输入按钮而设计，这种圆形按钮样式使用sliding doors 技术，该技术由单个图像组合而成。

此按钮样式可实现以下功能：

长期解决宽按钮问题 IE 浏览器的按钮名称。
解决了在 IE 浏览器中，当按钮隐藏在服务器端时，右侧滑动门块会漂浮在页面上的问题。
解决了 IE 浏览器的碎片化文本问题向下滚动然后备份页面时。
这是完美的选择当您无法使用 ASP 时的设计师 .Net按钮控制如 <asp:Button id="b1" Text="Submit" runat="server" /> 在您的代码中
交叉兼容对于 safari，即 firefox、chrome 和歌剧。 watch video

【问题讨论】：

【解决方案1】：

我认为你只需要更改一个伪类。

span.button input.form_button:hover {
  background-position:left -39px;
  color:#FFFFFF;
}

应该是

span.button:hover input.form_button {
  background-position:left -39px;
  color:#FFFFFF;
}

编辑：这是演示源代码的第 52 行

【讨论】：

你解决了！另外，我根据您的建议添加了此内容，因此当单击右侧提示时，它也会正确激活左侧。谢谢瑞恩！我现在有一个完成的按钮！ span.button:active input.form_button { background-position:left -78px;颜色：#FFFFFF； }