Question

I need a button to stay active after I clicked it (opacity changed).
How can I do that using CSS ?
I already tried the :active and :enabled class, but they don’t work.

Appreciating a working solution.

If it’s not possible in CSS, can someone help me to do that switch in jquery ?

Answer 1

I don’t think it’s possible with pure CSS.

This is an example with jQuery and CSS: http://jsfiddle.net/hrPcU/

$('#btn').on('click', function(e){
    //Toggle:
    $(this).toggleClass('active');
    //Activate just once:
    //$(this).addClass('active');
});​

---

Edit (->comments):

If you want to switch the class back if you click anywhere outside the button, try something like this: http://jsfiddle.net/hrPcU/1/

$(document).on('click', function(e){
    //Check if the event was fired from the button
    if($(e.target).attr('id') != 'btn'){
        $('#btn').removeClass('active');
    }else{
        $('#btn').toggleClass('active');  
    }
});

​