Internet Explorer上的好看的按鈕（使用CSS）

Question

讓我們面對它吧，普通的輸入表單按鈕是無聊而平淡的。所以我試着搜索，我想..也許你們知道一個更好的答案。

你們知道我在哪裏可以找到性能的CSS按鈕，在Internet Explorer上工作？

感謝

Answer 1

jQuery UI的CSS有一些非常好看的人（我認爲）：

http://www.filamentgroup.com/examples/buttonFrameworkCSS/

（編輯鏈接）

Answer 2

在這裏你去：https://github.com/imathis/fancy-buttons

Answer 3

我會建議使用CSS的background-image屬性來改變輸入按鈕的渲染方式。您可以設置固定的像素寬度和高度，並使用Photoshop或Gimp等程序創建背景圖形。如果你需要按鈕標籤是動態的，那麼使圖片沒有文字標籤。這種方法不像其他方法那麼靈活，但它確保您的按鈕在IE，FireFox和幾乎所有其他瀏覽器中看起來都一樣。下面是一個例子CSS類適用於使用了「拉門」的方法，讓你給你的按鈕懸停突出你輸入按鈕：

.my-styled-button { 
    background-image: url('images/my-button-background.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
    width: 150px; 
    height: 80px; 
    text-align: center; 
    font-size: 12px; 
    border: none; 
} 
.my-styled-button:hover { 
    background-position: 0px -80px; 
} 

Answer 4

這是一個老問題，但我建議您Twitter Bootstrap。

這是一個HTML/CSS框架，它允許您輕鬆地製作great buttons（等等）。

此按鈕是「crossbrowser」這意味着它們是兼容Internet Explorer。

只有一個類別 - btn - 您可以設定<button>，<input type="button">或<a>。

此：

<button class="btn"></button> 

給出：

btn-primary，btn-info，btn-success，btn-warning，btn-danger：

您還可以快速與可選類自定義按鈕和btn-inverse。

這個類轉換你的按鈕，像：

然後你可以選擇一個大小與類btn-large，btn-small和btn-mini。

最後，您可以在按鈕中添加一個圖標（the list is here）。

此：

<button class="btn btn-success"> 
    <i class="icon-shopping-cart icon-white"></i> 
    <span>Checkout</span> 
</button> 

給出：

與你的新的按鈕樂趣。 :)