Mouse over effects on buttons using JavaScript and CSS

This tip will allow your buttons to have a life by simply changing its colors whenever the user points the mouse on it, and changing back when moving it out.

The trick is using a combination of JavaScript and CSS

Code

Put this code in your HTML Head Content:

"<Style>
.button  
{ width:98%; 
  text-align:center;  
  cursor:hand;
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:FFCC99;
}
.out
{ width:98%; 
  text-align:center;  
  cursor:hand;  
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:99CC99;
}  
</Style>"

And put this code into your buttons HTML Property:

Class: button
Other: onMouseOut="this.className='button'" onMouseOver="this.className='out'"

Enjoy!

Rate this Tip To rate tips, you must be a member of SearchDomino.com. Register now to start rating these tips. Log in if you are already a member. Digg This!     StumbleUpon     Del.icio.us    RELATED CONTENT HTML Create a dynamic fluid image gallery with Lotus Notes views Write HTML and JavaScript in Notes view rows and columns on the Web Open Lotus Notes documents in Microsoft Word without coding Trap an attachment path via the Domino file upload control field A bevy of Notes/Domino development tips Styling Lotus Domino Web fields How to convert Microsoft Word or Microsoft Excel documents to HTML An easier way to view multiple columns on the Web How to print a form in landscape format automatically Tip contest winner: Hide view column while being able to sort it RELATED RESOURCES 2020software.com, trial software downloads for accounting software, ERP software, CRM software and business software systems Search Bitpipe.com for the latest white papers and business webcasts Whatis.com, the online computer dictionary DISCLAIMER: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.