Button with multiple icons

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

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

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

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