Solved

Button depress effect on click

Posted on 2007-03-22
6
2,208 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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
Can't get js code to execute 8 30
Jquery driving me nuts... 14 27
Html date format 9 20
How do I post more than 1 item to php backend 24 27
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 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