Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Button depress effect on click

Posted on 2007-03-22
6
Medium Priority
?
2,213 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
[X]
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
6 Comments
 
LVL 11

Assisted Solution

by:flipz
flipz earned 400 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 400 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 1200 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

715 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