Usually it is bad practise to replace submit buttons with textual links, but sometimes the design necessitates that they blend in with other text links, e.g. in a menu bar.
This was the challenge for me too, and I show you how to make the submit button blend in seamlessly with your textual menu links.
I tested the solution successfully in Mozilla 1.7, Firefox 1.5, Internet Explorer 6, IE 7 and Opera 8.5. If you're using Safari 2 for Macintosh you have to replace all <input> tags with <button> tags (see note below).
We assume that you have already set up your menu. In this example I'm using a horizontal menu since that was what I had to deal with:
The menu is crafted using the usual ul/li combination using CSS to style it:
<div id="horizontalUserMenu"> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </div>
Now we just add another list element which contains the submit button:
<div id="horizontalUserMenu">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><input name="theMode" type="submit" value="Submit" /></li>
</ul>
</div>
which results in the following menu:
To do this we have to create a new class in CSS which styles the submit button according to the existing text links. Since the button gets all its styling from the default settings of the browser we have to start from scratch:
.buttonAsLink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #4d798e;
background-color: #bdd1d7;
font-weight: bold;
padding: 3px 0;
border-width: 0;
cursor: pointer;
width: 100px;
}
Then we assign the class to the submit button:
<div id="horizontalUserMenu">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><input name="theMode" type="submit" value="Submit"
class="buttonAsLink" /></li>
</ul>
</div>
and get the following result:
Nice! This works already, but the missing hover effect is really confusing.
So far we didn't need any JavaScript code. To accomplish the changing colours of the hover effect we have to use some code, but it won't be complicated. However, those 10% or so which have JavaScript turned off won't be able to see it.
We could try a bold .buttonAsLink:hover class in our CSS, and it would work with Mozilla-based browsers and Opera. But, alas, we have to consider the world's most used non-standard browser (IE) as well. IE does not support the hover modifier for buttons.
For cross-browser compatibility we use JavaScript. The concept is to create two CSS classes, one for the normal and another for the hovered state. JavaScript then switches between the two depending if we hover the mouse pointer over the button or not. Let's go to work.
Just copy and paste the code of the buttonAsLink class and modify the class name and the background colour:
.buttonAsLink_hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #4d798e; background-color: #e9f3f6; font-weight: bold; padding: 3px 0; border-width: 0; cursor: pointer; width: 100px; }
You have to copy all properties since we're going to completely switch between classes now.
Now we have to tell the submit button that a different class has to be used depending on the mouse state. For this we use the JavaScript functions onMouseOver and onMouseOut:
<div id="horizontalUserMenu">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><input name="theMode" type="submit" value="Submit"
class="buttonAsLink"
onMouseOver="this.className='buttonAsLink_hover';"
onMouseOut="this.className='buttonAsLink';" /></li>
</ul>
</div>
What does it do? When we hover over the button (onMouseOver) the JavaScript code tells the browser to use class buttonAsLink_hover for the submit button (which is referenced by 'this'). Conversely when the mouse pointer moves out of the button's focus (onMouseOut) it assigns the class for the static state.
Here's it in action:
If you have activated the status bar in your browser, notice how you can see the link targets for the text links but nothing for the submit button.
Should IE ever support the hover property for buttons, just remove the mouse events and rename the hover class to .buttonAsLink:hover — easy!
For a copy of the button classes I suggest you check out the source code of this page.
The Safari browser on Macintosh systems requires a <button> instead of the <input> tag as follows:
<div id="horizontalUserMenu"> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><button name="theMode" type="submit" class="buttonAsLink" onMouseOver="this.className='buttonAsLink_hover';" onMouseOut="this.className='buttonAsLink';">Submit</button></li> </ul> </div>
Check it out: