帶圖標的CSS3按鈕

我按照此tutorial創建帶有圖標的CSS 3按鈕。但是本教程圖標高度的問題取決於font-size。如果我增加文字的字體大小，圖標非常適合，但如果我儘量減少字體大小，它不適合well.Image我使用的是40x30帶圖標的CSS3按鈕

a.button { 
    background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0, #ffffff),color-stop(1, #dbdbdb)); 
    filter: progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#ffffff', EndColorStr='#dbdbdb'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#ffffff', EndColorStr='#dbdbdb')"; 
    border: 1px solid #fff; 
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); 
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); 
    border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    padding: 5px 5px; 
    text-decoration: none; 
    text-shadow: #fff 0 1px 0; 
    float: left; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    display: block; 
    color: #597390; 
    line-height: 38px; 
    font-size: 15px; 
    font-weight: bold; 
} 
a.button:hover { 
    background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0, #ffffff),color-stop(1, #eeeeee)); 
    filter: progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#ffffff', EndColorStr='#eeeeee'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#ffffff', EndColorStr='#eeeeee')"; 
    color: #000; 
    display: block; 
} 
a.button:active { 
    background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0, #dbdbdb),color-stop(1, #ffffff)); 
    filter: progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#dbdbdb', EndColorStr='#ffffff'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient 
     (startColorStr='#dbdbdb', EndColorStr='#ffffff')"; 
    text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5); 
    margin-top: 1px; 
} 
a.button { 
    border: 1px solid #979797; 
} 
a.button.icon { 
    padding-left: 11px; 

} 

a.button.icon span{ 
    padding-left: 48px; 
    display: block; 
    background: url(../img/gmail2.png) no-repeat; 
}

來源

2013-02-01 Himanshu Yadav

如果可以的話這將是有益分享你的代碼。
在您提供的鏈接的css3 buttons examples中，如果我減小字體大小並設置以下CSS樣式，則可以使用。

span { display: block; }

span是在按鈕內部包裝文本的標籤。

來源

2013-02-01 03:03:48

如果我添加到a.button.icon span {display：block; }，圖像不是中心。嘗試添加更大尺寸的圖像。 –

如果我在共享的鏈接的示例上執行此操作，它工作正常。所以發佈你的代碼到目前爲止，以進一步幫助你。 –

你的陳述有點模棱兩可，沒有問題，但我會採取刺。

在這種情況下，font-size將始終發揮一個小的因素，因爲它將確定圖標的高度。在某些時候，你將需要知道關於按鈕大小的一些細節，但它不一定受字體的影響。如果您設置了按鈕height和img{ height:100%; }，圖像將縮放以適合該區域。

<div id="container"> 
    <h1><img src="http://placedog.com/50/50" alt="" />Button</h1> 
</div>

與

#container{ 
    border: 2px solid black; 
    width: 200px; 
    height: 20px; 
} 
#container img{ 
    height:100%; 
}

組合應該讓你關閉你的東西，你在找什麼。我掀起了一個小小的jsfiddle來演示一種方法來實現這一點。

來源

2013-02-01 03:25:37 lacy

帶圖標的CSS3按鈕

回答

相關問題