Input Button Using Sliding Doors CSS

Question

Designed specifically for input buttons such as <input type="submit" value="Button Name">, this round button style uses the sliding doors technique that's assembled from a single image.

Demo: Click to review the source code and demo the code in action
Demo: Click to see a video demo of the style in Mac browsers: Firefox, Safari, Chrome and Opera

This button style enables the following:

• Resolves wide button issue for long button names for IE browsers.
• Resolves an issue with IE browsers when the right sliding door piece would float on the page when the button is hidden server side.
• Resolves fragmented text issue for IE browsers when scrolling down and then back up the page.
• This is the perfect alternative for designers when you can't use the ASP .Net button control such as <asp:Button id="b1" Text="Submit" runat="server" /> in your code
• Cross compatible for safari, ie, firefox, chrome and opera. watch video

Answer 1

I think you just need to change one pseudo-class.

span.button input.form_button:hover {
  background-position:left -39px;
  color:#FFFFFF;
}

Should be

span.button:hover input.form_button {
  background-position:left -39px;
  color:#FFFFFF;
}

Edit: It's line 52 of the demo source