Button with multiple icons - html

Question

I have a CSS button definition that looks like this:
.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%;
}
I need couple of those buttons on my page but with different icons.
I tried something like this:
.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%;
}
And calling it with:
<p><a class="btn client" href="#">Klijenti</a></p>
<p><a class="btn poslovnica" href="#">Poslovnice</a></p>
But that did not work.
I'm still struggling with HTML and CSS so I'd like to stay away from java, jQuery and such till I'm a bit more comfortable with HTML/CSS.
Here's a working test in jsFiddle: jsfiddle.net/8hKGf/3

Answer 1

Well, you are almost there... Look at this one, using your code.
http://jsfiddle.net/fg7Ya/
It will output the same image for each button.
If we go further, we get this:
http://jsfiddle.net/fg7Ya/2/
Which is this, in short:
.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

If I got you right, you want to keep your gradient and have those icons within your button? If so, use background-image for your icons. This will keep the background gradient:
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%;
}
Moreover, you schould remove the <p> Tag from the anchor.

Answer 3

you just need your background-size this will keep background color.
check out this fiddle :
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%;**
}