asp.net - 如何制作具有滑动门效果的提交按钮？

Question

我有一个 ASP.NET .NET 4.0 Webform 网站。我在这个网站的几乎所有页面上都有几个提交按钮，它们是用以下代码生成的：

<asp:Button id="b1" Text="Submit" runat="server" />

现在我需要将其切换为 CSS 滑动门效果（或类似的东西）以在所有按钮（提交和链接按钮）上获得相同的外观

推拉门：http ://alistapart.com/article/slidingdoors

我如何尽可能简单地做到这一点？

Answer 1

我发现“滑动门”技术的最大问题是您需要在标记中添加一个额外的元素。您应该能够通过将按钮包装在<span>标签中来实现此目的：

<span><asp:Button id="b1" Text="Submit" runat="server" /></span>

并在左侧或右侧给跨度一些填充（取决于您希望图形的较小部分出现在哪一侧）。但是，如果您想应用翻转效果，您可能会遇到问题（跨度不会:hover在按钮/链接的状态上出现），并且用户将无法单击按钮外部的图像条/link 除非您将 JavaScript 添加到等式中。

这是一项相对较少收益的大量工作。

如果没有看到您尝试复制的设计，就很难提供精确的解决方案；不过，您可能会发现，您尝试通过使用图像来实现的大部分内容都可以使用 CSS 来完成，并且可以应用于链接和按钮。它不会像“滑动门”技术那样跨浏览器（例如，IE 的 onledr 版本不支持圆角），但大多数现代浏览器都可以应付得很好。