Question

When i click the button, :active class becomes active and it turns third image, “the clicked state”, but when i cancel the click, that state stays on button until i click somewhere else on body. I want to button returns to first state after canceling click.

.button_friend {
   width: 240px;
   height: 35px;
}
.button_friend a {
   width: 240px;
   height: 35px;
   background-position: left 0px;
   background-image: url("../Images/btn_friend.png");
   display: block; text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
}
.button_friend a:hover {
   background-position: left -36px;
}
.button_friend a:active { 
   background-position: left -73px;
}

Image:

http://screencast.com/t/QaayuIJx

Answer 1

That jsFiddle has no code in it? Based on your photo and the tags for the question, however, it looks like you are using jquery ui and the ui framework with one of the stock themes then adding your own css? If I am wrong about that please chalk it up to the code being missing on the jsfiddle.

Otherwise,

I have seen this is alot with jquery ui “buttons” that are built from an actual button ( input or submit ) not sure why but it I have a few ideas why this may be. Check this page out.
http://taitems.github.com/Aristo-jQuery-UI-Theme/# . Click on the input and submit type buttons. The state is saved. Click on the div converted to a button – its not. You’ll notice the lower buttons with the icons do what you want also but they are also from divs. I think there is a bug with jquery ui on this or this was the desired behavior?

To fix it you can just use another element or if a button is necessary, remove the ui-state-active class on click.