Skip to content

More on CSS & Web Buttons

After a previous article, I decided I needed a way to expand web buttons to look even more like ‘normal’ computer buttons. Windows XP buttons highlight when your mouse goes over them. I knew this was possible with links, so I set out to do it with buttons as well.

Looking into a CSS book, I found the pseudoclass :hover. It seemed to be exactly what I needed. The :hover pseudoclass occurs when the mouse is over the object. It’s why a link can be underlined when the mouse is over it, but not underlined when you move away. But, it couldn’t possibly be that easy. And, as luck would have it, it wasn’t. Internet Explorer does not support the :hover pseudoclass on any object other that <a> links.

Fortunately, there is another way. By using JavaScript and the onMouseOver / onMouseOut pair, it is fairly easy. Typically this is used for image swaps, but it works for changing CSS classes as well.

First, you need two classes; one for the ‘normal’ state and one for the ‘mouseover’ state.

<style type="text/css">
     .normalbutton
          {
          background-color: white;
          font-size: medium;
          }
     .mouseoverbutton
          {
          background-color: silver;
          font-size: medium;
          }
</style>

The examples are intentionally simplistic just to give you the idea. We will use JavaScript to change from one to the other. To define a button, use the code.

<input type="button" name="submitbutton" value="Submit" class="normalbutton" onMouseOver="this.className='mouseoverbutton" onMouseOut="this.className='normalbutton';">

For a demonstration, please Click here. I apologize for the pop up, but I couldn’t figure out how to get the script to work inside of WordPress. Again, this is a fairly simple example; but it gives you a place to start.

Published inProgramming

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *