Input Button Sliding Doors CSS Issue

Question

I have a sliding doors technique working great on my input buttons with the exception of one last piece I can't resolve. When I mouse over the right side tip of the button it will highlight a different shade of my button style. The right side is the "sliding door" and it appears to function independent of the left side of the button.

How can I enable the right tip control the left side like the left side can control the right side?

DEMO: http://jsbin.com/ekini3

Note: This button style enables the following: - Resolves wide button issue for long button names for IE browsers. - Resolves text issue for IE browsers when scrolling down and then up. - This is the perfect alternative for designers when you can't use a an ASP .Net button control - Cross compatible for safari, ie, firefox and chrome

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