Change Image Color in Button

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/

could you able to add code to add snippet or fiddle? – Nehemiah Jul 12 '16 at 03:21 — Nehemiah, Jul 12 '16 at 03:21
@Nehemiah https://jsfiddle.net/35kfu6z7/ Here... – user2826499 Jul 12 '16 at 03:37 — user2826499, Jul 12 '16 at 03:37

score 2 · Accepted Answer · answered Jul 12 '16 at 03:42

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(https://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>

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

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?.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 12 '16 at 03:42

Wim Mertens

1,780
3
20
31

where is the sample link? Thank you. – user2826499 Jul 12 '16 at 03:44
To use an icon font, check out: http://fontawesome.io/icons/ or http://www.fontello.com – Wim Mertens Jul 12 '16 at 03:46

score 0 · Answer 3 · answered Jul 12 '16 at 03:44

0

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

answered Jul 12 '16 at 03:44

Chaitanya Kale

243
1
7

score 0 · Answer 4 · answered Jul 12 '16 at 04:28

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)

score 0 · Answer 5 · 2016-07-12T10:48:23.527

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/

score -1 · Answer 6 · answered Jul 12 '16 at 03:24

-1

Why not change the color of the image using photoshop?

answered Jul 12 '16 at 03:24

Undecided Dev

840
6
16

actually I'm just looking for other way to changed it using CSS. Instead of Photoshop – user2826499 Jul 12 '16 at 03:28
i think there is no way of doing that in css. – Undecided Dev Jul 12 '16 at 03:29

Change Image Color in Button

6 Answers6