带有多个图标的按钮

Question

我还是新来的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

Answer 1

那么，你就要成功了......看这一个，使用你的代码。

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; 
} 

Answer 2

如果我有你的权利，你要保持你的梯度和有按钮内的那些图标？如果是这样，请使用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>标签。

Answer 3

你只需要你的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%;** 
}