CODEWITHSUNDEEP
javascriptcssbutton
user3498435
user3498435

Reputation: 25

Change button colour

My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.

Here is the code for the button:

<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>

And here is the function that inserts an image to the map: 

$('#tram7')[0].onclick = function() {
    if (overlayTram7.getMap() == map) {
        $('#tram7').addClass('deselected');
        overlayTram7.setMap(null);
    } else {
        $('#tram7').removeClass('deselected'); 
        overlayTram7.setMap(map);
    }
};

The style change worked with a hover, but I don't know how to change the style of a clicked button.

.Button {
 font-family: Calibri, sans-serif;
 font-size:13px;
 font-weight: bold; 
 width: 160px;
 height: 25px;
 background:grey;
 color: white
}

.Button:hover {
 color: white;
 background:green
}

Thanks in advance.

Upvotes: 1

Views: 192

Answers (3)

Finrod
Finrod

Reputation: 2550

Use toggleClass in your click callback to add/remove a class which will style your button:

$('#tram7').toggleClass('clicked');

And the class:

.Button.clicked {
 color: white;
 background:blue
}

http://jsfiddle.net/5m9h6/1/

Upvotes: 0

EnigmaRM
EnigmaRM

Reputation: 7632

Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:

You'll want the psuedo-selector, :active

.Button:active {
   color: white;
   background:green
}

Here is an example

Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()

Updated example using toggleClass()

Upvotes: 1

Greg
Greg

Reputation: 2173

The :active pseudo-selector should be what you're looking for

.Button:active {
 color: white;
 background:red;
}

Upvotes: 1

Related Questions