Solved

Button depress effect on click

Posted on 2007-03-22
6
2,196 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 29

Expert Comment

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

Author Comment

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

Accepted Solution

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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

771 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

11 Experts available now in Live!

Get 1:1 Help Now