帶有多個圖標的按鈕

我還是新來的HTML，特別是CSS，所以請裸露在我身邊。我有一個CSS定義按鈕，看起來像這樣：帶有多個圖標的按鈕

.btn { 
     display: inline-block; 
     text-align: center; 
     vertical-align: middle; 
     padding: 12px 24px; 
     border: 1px solid #acacac; 
     border-radius: 8px; 
     background: #f5f5f5; 
     background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#acacac)); 
     background: -moz-linear-gradient(top, #f5f5f5, #acacac); 
     background: linear-gradient(to bottom, #f5f5f5, #acacac); 
     -webkit-box-shadow: #ffffff 0px 0px 40px 0px; 
     -moz-box-shadow: #ffffff 0px 0px 40px 0px; 
     box-shadow: #ffffff 0px 0px 40px 0px; 
     text-shadow: #ffffff 1px 1px 1px; 
     font: normal normal bold 20px arial; 
     color: #111111; 
     text-decoration: none; 
    } 
    .btn:hover, 
    .btn:focus { 
     border: 1px solid #f5f5f5; 
     background: #ffffff; 
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cecece)); 
     background: -moz-linear-gradient(top, #ffffff, #cecece); 
     background: linear-gradient(to bottom, #ffffff, #cecece); 
     color: #111111; 
     text-decoration: none; 
    } 
    .btn:active { 
     background: #acacac; 
     background: -webkit-gradient(linear, left top, left bottom, from(#acacac), to(#acacac)); 
     background: -moz-linear-gradient(top, #acacac, #acacac); 
     background: linear-gradient(to bottom, #acacac, #acacac); 
    } 
    .btn:before{ 
     content: "\0000a0"; 
     display: inline-block; 
     height: 24px; 
     width: 24px; 
     line-height: 24px; 
     margin: 0 4px -6px -4px; 
     position: relative; 
     top: 0px; 
     left: 0px; 
     background: url("../img/rn.png") no-repeat left center transparent; 
     background-size: 100% 100%; 
    }

我需要幾個這些按鈕的我的網頁上，但不同的圖標。

我想是這樣的：

.client{  
    background: url("../img/client.png") no-repeat left center transparent; 
    background-size: 100% 100%; 
} 
.poslovnica{  
    background: url("../img/poslovnica.png") no-repeat left center transparent; 
    background-size: 100% 100%; 
}

而且與調用它：

<p><a class="btn client" href="#">Klijenti</a></p> 
<p><a class="btn poslovnica" href="#">Poslovnice</a></p>

但沒有奏效。

我仍然在努力使用HTML和CSS，所以我想遠離java，jQuery等，直到我對HTML/CSS更加舒適。

這裏的工作測試中的jsfiddle：jsfiddle.net/8hKGf/3

來源

2014-02-26 gec100

你可以發佈一個小提琴？ – Zword

你可以放一個小提琴嗎？ – STP38

是的。這裏是http://jsfiddle.net/8hKGf/3/ – gec100

那麼，你就要成功了......看這一個，使用你的代碼。

http://jsfiddle.net/fg7Ya/

它會輸出相同的圖像爲每個按鈕。

如果我們走的更遠，我們得到這樣的：

http://jsfiddle.net/fg7Ya/2/

這是本，簡稱：

.btn.client:before { 
     background: url("http://www.klm.com/jobs/nl/images/icon_updateprofile_tcm701-313773.gif") no-repeat left center transparent; 
} 

.btn.poslovnica:before { 
     background: url("http://www.dhl.nl/content/dam/General%20DHL%20pictures/Icons/Small%20teasers_50x50/dhl_open_account_icon_42x40.jpg") no-repeat left center transparent; 
}

來源

2014-02-26 08:42:10 Siyah

thx。那正是我所需要的 – gec100

很高興聽到，祝你好運！ – Siyah

如果我有你的權利，你要保持你的梯度和有按鈕內的那些圖標？如果是這樣，請使用background-image作爲圖標。這將保持背景漸變：

Fiddle

.client{  
    background-image: url("../img/client.png") no-repeat left center transparent; 
    background-size: 100% 100%; 
} 
.poslovnica{  
    background-image: url("../img/poslovnica.png") no-repeat left center transparent; 
    background-size: 100% 100%; 
}

此外，您schould刪除錨點的<p>標籤。

來源

2014-02-26 08:44:15 DonJuwe

thx。這確實修復了漸變，但沒有顯示不同的圖標。只是第一個定義。 – gec100

你只需要你的background-size這將保持背景顏色。看看這個小提琴：

http://jsfiddle.net/C45ks/

.client{  
    background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg") 
no-repeat left center transparent; 
**background-size: 20% 60%;** 
} 
.poslovnica{  
background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg") 
no-repeat left center transparent; 
**background-size: 20% 60%;** 
}

來源

2014-02-26 08:49:56

thx。好的解決方案只比Siyahs的一個更復雜一些 – gec100

帶有多個圖標的按鈕

回答

相關問題