推薦：網頁設計中的版式原理--力場
美的形式原理存在于藝術各個門類，網站制作也不例外。好的網站制作必須遵守這些設計原理，將美融匯于網站制作中。網站制作中的頁面原理的講解雖然分十二節進行

翻譯原文：
http://diger.cn/article.asp?id=359

英文原文：
http://particletree.com/features/rediscovering-the-button-element/

對每一個程序設計者來說，為用戶創建一個統一的界面是一個不變的追求。網站中建立一致性是非凡困難的，根據瀏覽器和操作系統的嚴重不同，幾而且乎什么能做和不能做是任意的，所以視覺表現也很不一樣。在任何地方比你處理表單元素時和建立標準的外觀的戰斗中最大的失敗變得更加顯然的就是最有名的提交按鈕。

照現在這個樣子，用Type="submit"輸入即丑陋(Firefox)，還有點神病(Internet Explorer)或者十分玩固(Safari)。用的最多的辦法是使用圖片輸入和我們自己創建這個該死的東西。這是很不幸的，因為每次我們需要一個新的按鈕時就要被迫于打開Photoshop的單調乏味。我們需要的是一些更好的東西——一些對設計者更加靈活和有意義的東西。幸運的是解決方案已經有了而且它只需要一點愛，我的朋友們，請答應我介紹我的小朋友給你吧：<button>元素。

Inputs VS Buttons

這里是你的標準提交按鈕標記：

<input type="submit" value="Submit" />

它在三兄弟里看起來是這樣的：

嗯，這里是提交時通過創建一個按鈕元素時的標記：

<button type="submit">Submit</button>

它看起來是這樣的：

這些按鈕就像上面我們的副本一樣工作和表現是一樣的。另外，為了提交表單，你可以使他們無效，添加一個accesskey或者指定一個tabindex。除了視覺冷淡以外Safari似乎擁有它們(并沒有使得我們能夠利用我們的優勢來面對綠色的界面)，<button>標簽最酷的地方在于你可以把有用的HTML標簽放進它們，比如圖片：

就像這樣：

非常好。(好了，他們有點丑陋,但是我說過他們需要一點愛。)事實上，根據W3C，這些非凡的視覺差異正是為什么<button>元素被創建的原因。

引用：

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

因此，我們正在尋找一種設計方案同時在這里我們的朋友寫著一本偉大的互聯網手冊中有一部分標記似乎正好在這個問題上可以幫助我們。這是很方便的，然而不幸的是大部分設計師和開發者甚至不知道這樣一個標簽存在。現在，在我用按鈕標簽取代image input之前，我確定這個標簽和CSS必須滿足一些條件：

條件：

引用：
1、它們要看起來像按鈕。
2、它們在不同的瀏覽器里看起來要一樣。
3、我用在按鈕上的樣式需要同樣用在我可能會用的鏈接上。
4、標簽應該是靈活的，易用于許多不同的情況。
5、我將能夠有效地使用圖標和色彩來傳遞將會發生的交互類型的信息。

帶著這些適當的挑戰，我在解決了夸瀏覽器的挑戰后鉆進了CSS之中，得出了下面的結果：

結果：

沒有什么了不起的，簡單，但有效。現在，我喜歡用這種方式處理按鈕是因為我可以使用FAMFAMFAM的1000個圖標庫來舉例說明大量可笑的想法和動作而不用每一次我需要新東西的時候非得用Photoshop來做一些東西。假如我們快速看一下這些標簽，你會注重到最后那兩個按鈕實際上就像：

<div class="buttons">
<button type="submit" class="positive">
<img src="/images/icons/tick.png" alt=""/>
Save
</button>
<a href="/password/reset/">
<img src="/images/icons/textfield_key.png" alt=""/>
Change Password
</a>
<a href="#" class="negative">
<img src="/images/icons/cross.png" alt=""/>
Cancel
</a>
</div>

這個有用的原因是網頁程序中的許多動作是依靠激發的，因而通過一個鏈接簡單的發送一個用戶到一個非凡的URL將引發它們需要做的動作。使用樣式可以為兩個元素（鏈接和按鈕）工作，無論是用于AJAX或者標準提交都能給我們保持交互方法的一致和適當的靈活性。

只是一個短暫旁白，你可能想知道為什么在那些圖片中我讓ALT標簽空白呢。可能會覺得驚異于alt屬性在每個圖片都是必須的，事實上不是這樣的。空的alt屬性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，當你的用戶努力尋找下一個目標時節省他們的寶貴時間。由于這些圖標確實是多余的，我寧愿不去浪費用戶睞接收我使用的圖片而不是接著呈現出來。他們將只會收到“Submit”而不是“Checkmark Submit”，那確實會讓事情變的有點亂。

分享：網頁設計中的版式原理--比例
美的形式原理存在于藝術各個門類，網站制作也不例外。好的網站制作必須遵守這些設計原理，將美融匯于網站制作中。網站制作中的頁面原理的講解雖然分十二節進行