Styling an Input Button Using "Sliding Doors"

Input Button Using Sliding Doors CSS

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

Css button sliding doors

Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded

However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)

help styling the asp:button control using the Sliding Door technique

To fix display: inline-block; for IE6-7 you can try

<div class="button"><input type="submit" /></div>

.button {
   display: inline;
   display: inline-block;
   zoom: 1;
}

(These styles are correct almost for any time you want simulate inline-block in all browsers)

Sliding doors for input text

You should put the input tag inside of a span or div and then do the sliding doors technique. If you don't want to add the extra tag, use multiple background images. It is important to note that this isn't supported by every browser.

About multiple CSS background images: http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/

How to make submit button with Sliding doors effect?

The biggest problem I've found with the 'sliding doors' technique is that you need to add an extra element to the markup. You should be able to achieve this by wrapping the button in a <span> tag:

<span><asp:Button id="b1" Text="Submit" runat="server" /></span>

And giving the span some padding to the left or right (depending on which side you want the smaller part of the graphic to appear). You will probably run into problems if you want to apply a rollover effect though (the span won't pick up on the :hover state of the button/link), and users won't be able to click the sliver of image that's outside the button/link unless you add JavaScript into the equation.

This is a lot of work for relatively little benefit.

Without seeing the design you're trying to replicate it's difficult to offer a precise solution; you might find, though, that most of what you're trying to achieve by using images can be done with CSS, and applied to links as well as buttons. It won't be as cross-browser as the 'sliding doors' technique (onledr versions of IE don't support rounded corners, for instance) but most modern browsers will cope just fine.

CSS sliding doors technique for buttons, IE8 problem

all browsers, except IE8 (and maybe earlier versions).

I checked and your prefect in IE7.
IE6 performs properly but you have that pesky png transparency issue.

You might try using the :focus pseudo class. IE8 may respect that where it didn't respect :active.

Mis-Aligned Sliding Doors in IE7

There's almost certainly a better way to fix this, but without seeing it..

Add a class to the broken input such as "ie7fix", then:

/* applies to only ie7 */
*+html .ie7fix {
    margin-top: -1px; 
}

http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack

---

Related Topics