Question

I’m trying to get a button to stay pushed down when clicked on. However, the box-shadow portion in what I’m working with, and the CSS active state part are both confusing me.

I know this is doable considering this code: http://jsfiddle.net/UEkBQ/

This is the code I’m working with: http://jsfiddle.net/frnYf/

It seems that the CSS “#button:active” is constantly functional, while I only want it to be toggled when clicked on.

Answer 1

The first fiddle works because make-me-green is a css class name, and can be targetted by css rules, where as #button:active is not a class name (its a css selector consisting of a tag id and a pseudoclass).

Change your css rule from #button:active to #button.some-css-class-name and the js to $(this).toggleClass('some-css-class-name');

The reason you need #button.some-css-class-name and not just .sone-css-class-name is that # selectors have a higher priority than . selectors.

In response to your question about the .…

<div id="blah" class="blah">hello</div>

we can target this div with its class or its id, to tell css which we use a . for a class or # for an id.

Or try: http://jsfiddle.net/frnYf/35/