Manage Learn to apply best practices and optimize your operations.

Mouse over effects on buttons using JavaScript and CSS

This tip will allow your buttons to have a life

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

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!

Dig Deeper on Domino Resources - Part 4

SearchWindowsServer

Search400

  • Favorite iSeries cheat sheets

    Here you'll find a collection of valuable cheat sheets gathered from across the iSeries/Search400.com community. These cheat ...

  • HTML cheat sheet

    This is a really cool cheat sheet if you're looking to learn more about HTML. You'll find just about everything you every wanted ...

  • Carol Woodbury: Security

    Carol Woodbury

SearchDataCenter

SearchContentManagement

Close