Pressed <button> selector

Question

I'd like to create a button that changes its style when it gets pressed. This is my CSS code:

button {      font-size: 18px;      border: 2px solid gray;      border-radius: 100px;      width: 100px;      height: 100px;  }    button:active {      font-size: 18px;      border: 2px solid red;      border-radius: 100px;      width: 100px;      height: 100px;  }

<button>Button</button>

It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.

Answer 1

You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:

Borrowing from a demo from another answer here I produced this:

a {    display: block;    font-size: 18px;    border: 2px solid gray;    border-radius: 100px;    width: 100px;    height: 100px;    text-align: center;    line-height: 100px;  }    a:active {    font-size: 18px;    border: 2px solid green;    border-radius: 100px;    width: 100px;    height: 100px;  }    a:target {    font-size: 18px;    border: 2px solid red;    border-radius: 100px;    width: 100px;    height: 100px;  }

<a id="btn" href="#btn">Demo</a>

Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/

Thanks to @BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/

_{Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.}