Solved

Button depress effect on click

Posted on 2007-03-22
6
2,202 Views
Last Modified: 2013-11-19
I'm not sure if this is CSS or javscript but what would the code look like that causes an image button to depress when it is clicked?

What are the thoughts on using a CSS hover effect?  This adds feedback to let the user know they are over a particular button.  I'm not sure if it is overkill.  Can be nice when buttons are grouped together but if you have a submit button sitting out by itself, is the hover effect necessary?
0
Comment
Question by:brettr
6 Comments
 
LVL 11

Assisted Solution

by:flipz
flipz earned 100 total points
ID: 18774426
If you have two CSS style; one for default and one for mouseover then you can use code such as this to implement the effect:

<input type="button" class="defaultButton" value="My Button" onMouseOver="this.className='mouseOverButton';" onMouseOut="this.className='defaultButton';">

Hover overs are not necessary but they can add a real nice touch to web pages depending on the styles you define.

You can also have a third style for an onclick and add this event handler to the button:
onMouseDown="this.className='mouseClickButton';"
0
 
LVL 8

Expert Comment

by:radnor
ID: 18781070
I have a site where the button design looks like a round rubber push button (blue).  Then when you mouse over I swap it for a (blue) button that looks like it is depressed.  Also show a red depressed button for the active page.

It is a nice way to give visual feedback to your visitors...

.02
0
 
LVL 5

Assisted Solution

by:rucky544
rucky544 earned 100 total points
ID: 18781436
i would use pure CSS.

for the hover use a:hover and for the press use a:active

I don't see any reason not to use a hover, they are simple to apply and you dont have to have a big change to let people know that it is deffinatally a button.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 29

Expert Comment

by:Badotz
ID: 18782195
<$.02>a:hover also *does not* consume an inline event</$.02>
0
 

Author Comment

by:brettr
ID: 18782744
Do you guys have online examples that I can see code?  Thanks.
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 300 total points
ID: 18785823
I think a good example of what you want is http://builder.com.com/5100-6371-5323375.html
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now