CSS button permanently pushed down state

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

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/