Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Button depress effect on click

Posted on 2007-03-22
6
2,206 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Page Speed Insight with srcset 4 87
Create an automated page index 9 51
Html CheckBox obtain Its Value 5 27
CSS Style Effect 2 8
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

860 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