"Depressed" button look

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

"Depressed" button look

Post by skylark2 »

Is there a way (apart from giving it a different class and using a stylesheet) to indicate that an input button has been "selected". i.e. it's clicked in? My stylesheet does have an "I'm now pressing this button" look, and it would be ideal if I could access it by using something like selected="selected" (which I did try hopefully - it doesn't work.)

I'm aware you'd normally use radio buttons for this, but I've been asked to duplicate the look-and-feel of an old Windows program as far as possible...
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: "Depressed" button look

Post by Eran »

What's wrong with using a class and a stylesheet? that is how it should be done. Use the :active pseudo-class in your CSS to indicate a button being pressed or a permanent class if you want it to stay 'depressed'
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: "Depressed" button look

Post by skylark2 »

Thanks, I'll try it that way.

I guess it just rubs me the wrong way to have to change the class of something based on whether it's been pressed or not. Seems a bit too fundamental somehow.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: "Depressed" button look

Post by Eran »

you are talking about changing the visual look of the button. The button is not actually being pressed, otherwise it would activate the functionality of the form. So you are simulating a pressed look with the class. There's not much difference as well between adding a class and adding a "selected" attribute
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: "Depressed" button look

Post by pickle »

Are you styling an actual <button> element, or is it <input[type=submit]> or is it <a/>? If it's the latter, you can use a:active in your CSS to target a depressed button.

If you're using CSS3 and not worrying about IE, you can use the :active pseudo-class on <button> and <input> elements as well.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: "Depressed" button look

Post by skylark2 »

pytrin, you're right - there isn't much difference practically between "selected=" and "class=". I'm still working with the mindset that giving something a class is a static part of the code, whereas in fact this bit of the HTML gets rewritten every time the user does something. Maybe I just need to name my classes "IAMDOWN" and "IAMUP" and start thinking of them as states :)

pickle, it is 'input type="submit"'. It's going to have to work on IE (and hopefully everything else a user might have, including borrowed machines, internet cafes etc. etc.). Clunky and portable is better than slick but only works on certain/modern browsers. I'm not familiar with <a/> but will go Google it.

Thanks to both of you - much appreciated.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: "Depressed" button look

Post by pickle »

skylark2 wrote:I'm not familiar with <a/> but will go Google it.
<a/> is just shorthand for <a href = "...">...</a>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply