Yay, first Coding post!
Needed a neat little submit button design today. Here’s what I ended up with:
As I wanted to have an rollover effect but IE doesn’t support usage of :hover with other elements than the a-tag, I decided to use a simple 3-liner for “on the fly (hover)” style switching:
function changeStyle(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
Very simple, but quite useful for several circumstances. id is the unique id of the element I want to switch the style of, newClass is the style I want to switch to. Only disadvantage is the non-functional hover effect with disabled JS in Internet Explorer.
Here’s the CSS code:
input.fancysubmit {padding-left:3px; border:0; color:#fff; background-color:#abcdef; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmit {padding-left:12px}
input.fancysubmit:hover {padding-left:3px; border:0; background-color:#abefcd; color:#fff; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmit:hover {padding-left:12px}
/* workaround for wacky IE CSS2 implementation */
input.fancysubmitmouseover {padding-left:3px; border:0; background-color:#abefcd; color:#fff; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmitmouseover {padding-left:12px}
As you can see, I’ve added an background image. It is just a tiny arrow in this case, but there are several other possibilities for using the background. You can download my all-in-one HTML file and the image here:
For those of you not that into browser hacks, the html>body makes IE ignoring the following style definitions. A good way to correct display problems concerning different box models of the browsers.