CSS窗體按鈕

我正在尋找一種在窗體上實現CSS中可重用按鈕的好方法。要求： - 獨立的圖像和文字（文字在許多語言） - 翻轉效果 - 播放精美的跨瀏覽器 - 沒有使用Javascript（如果可能） - 圓角CSS窗體按鈕

最新最好的方式做到這一點？多年前，我使用滑動門技術，但現在看起來已經過時了。你會使用舊版瀏覽器的回退CSS3嗎？有沒有特別好的想法？

來源

2011-06-10 Alex

我會爲此使用css精靈。你可以在這裏找到他們： http://css-tricks.com/css-sprites/

這基本上是一種使一個大型圖像，具有所有按鈕狀態（正常，懸停，選中）的方法。好處是它是一個http請求，並且在第一次懸停時不會看到閃爍。如果您使用此路線，則CSS背景屬性將爲圖像。然後，您可以使用文本對齊和行高來將要放置在圖像上的文本居中。

來源

2011-06-10 15:25:25 jray0039

-1

一個精靈是一個不錯的選擇，我時常使用它們。

就我個人而言，我不介意我的網站在所有瀏覽器中都不相同，並且我去了CSS類路線。我記住各種瀏覽器支持和不支持的內容，如果某個元素需要某種特定的方式，我會仔細檢查W3Schools的兼容性。

讓我使用CSS/CSS3類的主要好處是，如果某件事情發生變化，它可以通過單個文件中的文本快速完成，如果需要的話，我可以使用撥號從10年前的計算機快速更改連接（如果它們仍然存在）並且沒有成像軟件。精靈的優勢在於它們在所有瀏覽器中都受支持，並且它們看起來完全相同（或多或少）。 SpriteMe是我聽說過的一個小書籤，如果你決定沿着這條路走下去，它將幫助小精靈。

我認爲這是一個你更喜歡的事情......這些問題是我在做出這種決定時要問自己的：它會多久改變一次？大或小的變化？如果它改變了，它會是一個完整的重新設計工作嗎？你知道什麼？你願意花多少時間學習你可能不知道的東西？你對這個項目的直言是什麼？

我希望這可以幫助你。

來源

2011-06-10 15:42:14 Ryan

Jquery UI按鈕非常棒。它們經過全面測試，完全符合標準，而且看起來非常棒。通過一行代碼，您可以在任何時間都有完整的按鈕。這裏的東西 - 他們可以在沒有jQuery的（去圖）執行

First, the tut

因此，標準的方法是用ID來建立一個元素（A，按鈕，輸入），把它作爲一個按鈕在jquery中是這樣的：$('#element').button()

但是，如果你按教程顯示的方式來做，你只需要添加一些類到一個元素來獲得類似的效果。因此，要做成一個按鈕的標籤的，這純粹是

<a href="" class="ui-state-default ui-corner-all">Button</a>

在這個例子中，沒有必要設置與jQuery的按鈕聲明按鈕......你的風格做，只。通過靈活地設計這麼多不同類型的元素，它打開了大量的門。

您將不得不加載Jquery UI css，它提供了ThemeRoller的附加好處，它可以通過簡單的文件更改來設置頁面上的元素。這是一個很好的方式來「主題」一個網站，必須趕快改變品牌，這使得我公司推出的定製主題應用程序非常有利可圖。

來源

2011-06-10 15:48:05 bpeterson76

+1，這很有意義。 – thirtydot 2011-06-10 16:02:18

我通過tut閱讀，它讓我完全困惑，我必須使用jQuery UI CSS樣式嗎？另外我需要加載jQuery UI？ – Alex 2011-06-15 01:45:11

亞歷克斯，是的，你將不得不使用JQuery UI風格。下載適合你的頁面的Jquery UI。打開zip文件，只帶上CSS文件夾。您必須將css文件包含在您要使用按鈕的頁面的CSS文件夾中。然後，你想添加樣式的任何元素都應該添加上面的類。另外，你可以去所有的JQuery，並用我描述的第一種方法調用按鈕，這會增加翻轉樣式。起初它有點強烈，但可能性非常驚人。 – bpeterson76 2011-06-15 03:15:44

這個庫，Nifty Corners Cubed使用Javascript，但是是一個相當乾淨的方式來圓形div標籤鏈接等等。很難找到一個可重用的解決方案，而不使用滑動門派生技術。否則，你會堅持製作無法修復的按鈕，以適應你的尺寸。

來源

2011-06-10 16:08:06 pat8719

你也可以看看PIE http://css3pie.com/

來源

2011-06-10 17:12:50

回答

相關問題