Change Image Color in Button - html

Question

I'm having trouble in changing the image color inside of a button.
Here's the image.
I want the black download button icon change to green icon if possible in CSS? or any other way to make it like that? Instead of re-creating it again
And for the code:
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(icon_delete.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
But the output is not changing the color. its still black.
https://jsfiddle.net/35kfu6z7/

Answer 1

You original code doesn't make much sense.
What you have here is an image with the 2 versions of your button. You can use a technique called CSS Sprites: https://css-tricks.com/css-sprites/
The idea here is to force the size of the button element to be the same size as the button on your image, then offset it using the background-position property to align it properly inside your button.
Here is an example using the picture you provided and 2 different clases (with 2 different offset) to show either the green or the black:
button{
display:inline-block;
width:84px;
height:26px;
background-image: url(http://i.stack.imgur.com/8aNAf.png);
background-color: none;
border: none;
}
button.green{
background-position: -3px 31px;
}
button.black{
background-position: -3px -3px;
}
<button class="green"></button>
<button class="black"></button>

Answer 2

Best would be to use a font like fontawesome for the icon. That way you can easily change the colour. Or use filters, see: Change color of PNG image via CSS?.

Answer 3

Can you link the actual image file you are using into your jsfiddle?

Answer 4

Try https://jsfiddle.net/35kfu6z7/1/
button em{
vertical-align:middle;
display:inline-block;
width:29px;
height:30px;
background-image: url(http://imgur.com/download/vICywDr/);
repeat:none;
}
button em.leftImage{
background-position: -28px, 0;
}
button em.rightImage{
background-position: 0, 0;
}
Same idea that #Jean-Yves Fargeat suggested(not enough rep to comment)

Answer 5

try this
html
<button onclick="green()";>
<div id="border">
<div id="square">
<div id="arrow"></div>
</div>
</div><span>download</span>
</button>
css
#border {
border: 2px solid black;
border-radius: 50%;
display: inline-block;
padding: 2px 6px 6px 6px;
position: relative;
top: 5px;
}
#square {
background: #000;
width: 4px;
height: 8px;
position: relative;
}
#arrow {
display: inline-block;
border: 5px solid;
border-color: black transparent transparent transparent;
position: absolute;
top: 100%;
left: -70%;
}
button span{
line-height: 30px;
margin: 5px;
}
javascript
function green() {
document.getElementById('border').style.borderColor = "green";
document.getElementById('square').style.background = "green";
document.getElementById('arrow').style.borderColor = "green transparent transparent transparent";
}
see here jsfiddle.net/hworm4/mpj47fLb/

Answer 6

Why not change the color of the image using photoshop?