如何使滑動門效果提交按鈕？

我有一個ASP.NET .NET 4.0 Webform網站。我有一對夫婦在這個網站上幾乎所有的網頁上提交按鈕，他們都用下面的代碼生成：如何使滑動門效果提交按鈕？

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

現在我需要切換這對於CSS滑動門效果（或財產以後simular）來獲得相同的外觀上的所有按鈕（提交和鏈接按鈕）

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

如何做到這一點儘可能容易嗎？

來源

2013-03-05 Banshee

我受夠了「滑動門」技術發現的最大問題是，你需要一個額外的元素添加到標記。您應該能夠通過包裝按鈕，在<span>標籤來實現這一目標：

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

，並給予跨度一些填充到左側或右側（取決於您希望出現在圖形中較小的一部分側）。如果您想應用翻轉效果，則可能會遇到問題（跨度不會在按鈕/鏈接的:hover狀態下拾取），並且用戶將無法單擊位於圖像外部的圖像的短片按鈕/鏈接，除非您在等式中添加JavaScript。

這是很多工作相對較少的好處。

沒有看到你想複製它很難提供精確的解決方案的設計;不過，你可能會發現，你試圖通過圖像實現的大部分內容都可以用CSS完成，並應用於鏈接和按鈕。它不會像'滑門'技術那樣跨瀏覽器（例如，IE的onledr版本不支持圓角），但大多數現代瀏覽器都能很好地應對。

來源

2013-03-05 09:07:48 MassivePenguin

所以你說的是它不可能將某個提交按鈕切換到具有某種推拉門的普通html按鈕並保持懸停效果？我知道我已經使用ASP.NET MVC完成了這個工作，但在這種情況下，我需要實現一個簡單的JavaScript，然後在submitbutton中指定要提交的表單。我必須在這裏以相同的方式嗎？在這種情況下，我想更改此網站上的所有按鈕：http://www.bradspel.net/從beeing帶有文本的圖像變爲明文和按鈕（帶有懸停效果）。 – Banshee 2013-03-05 09:56:42

您應該可以將提交按鈕包裝在'span'中，並且可以使用'span.classHere：hover，span.classHere：hover input'來設置它的樣式，但是仍然會遇到一些瀏覽器的問題玩得很好（並且你會對抗按鈕的本地懸停行爲，除非你事先明確無效），並且用戶無法點擊跨度（除非你使用一些Javascript來將提交按鈕的行爲應用到其父跨度）。儘管如此，這是一個非常難以理解的方式。 – MassivePenguin 2013-03-05 10:22:18

如何使滑動門效果提交按鈕？

回答

相關問題