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

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状态下获取），并且用户将无法点击除非您将JavaScript添加到等式中，否则图像位于按钮/链接之外。

这是一项相对较少的好处。

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