General Question

vekteur's avatar

Is there a way to get an "onrelease" state using CSS?

Asked by vekteur (107 points ) July 21st, 2010

Is there a way to style the way a button looks after the mouse click is released (after the “active” state).

Right now the button is blue in the beginning, light grey when hovered and dark grey when clicked/active. When I release the mouse it flashes to the original blue before loading the next page.

Any solutions using CSS? or simple javascript/jQuery?

Observing members: 0 Composing members: 0

8 Answers

wgallios's avatar

I believe with just CSS the only pseudo-class that would come close is :hover for example ”.class:hover{ }”. Unless there is something new that has come out.

your best bet would be to would be to use onmouseup in the element itself. Add something like onmouseup=“this.className=‘newClassName’;”

That method would also be more compatible with IE 6 (if your concerned) as IE 6 does not support :hover.

ETpro's avatar

Support for CSS psuedo-classes visited should do the trick. Just make sure you put them in the correct order so inheritance doesn’t backfire on you.
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

JavaScript onBlur ought to should let you do even more creative things if you don’t mind passing the task to JS.

lapilofu's avatar

Alas, there’s no such CSS pseudo-class. Here’s a simple jquery solution. Replace ”#button” with whatever selector gets to the button and add css styles for ”.released” into your stylesheet.

$(’#button’).mouseup(function(){
$(this).addClass(‘released’);
});

ETpro's avatar

@lapilofu The visited pseudo-class exists, and it works in every major browser I know of. And it can be used with the background: property to control a graphic button so that the button has one image for the unvisited a tag, and different ones for the visited, hover and active states.
http://webdesign.about.com/od/css/a/aa041904.htm

lapilofu's avatar

@ETpro I don’t think :visited applies until one has actually visited the website that a link leads to. I believe the question is about a) a button and b) the state of the button before the next page has loaded but after the button has been clicked. Perhaps I’ve misunderstood, though.

ETpro's avatar

@lapilofu I see what you are saying. Perhaps. I was assuming the button loaded a popup window or some such. If it instead loads a page that takes a long time loading, then your trick and substituting one of the little spinner animated GIFs might be a cool approach. That would at least show something is happening.

vekteur's avatar

@lapilofu you have interpreted the question correctly. During the click itself the button is in the “active” state. As soon as the click is released, the button briefly goes back to the unclicked state before the next page loads. Call me OCD but that little moment breaks the whole illusion of a press-able button.

lapilofu's avatar

My solution should fix your problem. OCD’s good when it comes to UI. In the words of the ever-fashionable Cary Grant: “It takes 500 small details to add up to a favourable impression.”

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther