CSS Change button image on click

Question

I have two HTML image buttons (both are grey color), and whenever user clicks on any button I have to change grey color image to color image (I have 2 color images) and make other button grey. So user can know the active button.

How can I achieve this in CSS?

I think you need javascript and optional css to do this

Totò
– Totò

2014-04-26 05:58:24 +00:00
Commented Apr 26, 2014 at 5:58 — Totò
– Totò, Commented Apr 26, 2014 at 5:58
You'll need javascript for that.

vikki
– vikki

2014-04-26 05:59:00 +00:00
Commented Apr 26, 2014 at 5:59 — vikki
– vikki, Commented Apr 26, 2014 at 5:59

Alfonso Jiménez · Accepted Answer · 2014-04-26 06:03:51Z

4

Add .button class (for example) to the buttons then use this jQuery code:

$( ".button" ).click(function() {
  $('.button' ).removeClass('active');
  $( this ).addClass('active');
});

<input type="button" class="button" id="button1" value="Button 1">
<input type="button" class="button" id="button2" value="Button 2">

Then with CSS you set the colors. You can have as many buttons as you want. See the fiddle below to check how it works.

answered Apr 26, 2014 at 6:03

Alfonso Jiménez

1,2451 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

insomnium_ · Accepted Answer · 2014-04-26 05:58:48Z

0

I suppose you want to use something like:

function buttonOnClick(){
$("#button2").css("background-color","Green");
}

<input type="button" onClick="buttonOnClick()">
<input type="button" id="button2">

answered Apr 26, 2014 at 5:58

insomnium_

1,8184 gold badges24 silver badges42 bronze badges

3 Comments

vikki Over a year ago

It's more complex than that, he/she wants two buttons that behave like the radio inputs.

user3191903 Over a year ago

what if I have more than 10 buttons, do I have to write it for 10 times ? exactly @vikki

insomnium_ Over a year ago

OK, got it. See @Alfonso Jiménez answer, he posted it before I properly edited my code to fit your request.

Collectives™ on Stack Overflow

CSS Change button image on click

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related