Styling an Input Button using “Sliding Doors”

Question

I have a webpage that is using third-party HTML that I cannot change. I can however edit the CSS style sheet. I have a "sliding-doors" style button that I want to swap for the default input button on the page, but I cannot figure how to do so using only CSS.

Here is the HTML of the button:

<div>
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>

And here is the CSS of an existing button that I have which uses the "sliding-doors" method:

.clear { 
    /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button_oval {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
    color: #222;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button_oval span {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 
a.button_oval:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 

Answer 1

If you are able to use the button element instead of the input element. The following articles are quite useful.

• http://jedisthlm.com/2008/03/27/flexible-css-buttons/
• http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

You can still use type submit and post like an input does

However, if you are relying on using this button as a submit, just beware that when using IE. it will submit the contents of the button also which will give a security exception for .net web apps.

*Edit, found a different link as original no longer works

Answer 2

Your only other option would be to use javascript to dynamically insert the ...my button text... tags typically used for sliding doors buttons. However this is not recommended as it will not work with JS disabled.

Answer 3

You need two elements to do nested background joining (aka sliding doors): an outer (background) one and an inner (foreground, containing the end-piece of the background image). If you only have a standalone <input> you're stuck.

If you can find a way to select the <div> you mentioned, you could use that as the outer element, with the button (with its natural background colour removed) as the inner. You would have to make sure the outer div was the same width/height as the inner <input>, though, perhaps by floating it left (to activate the ‘shrink-to-fit’ behaviour that comes with floats). You would also need to account for the top margin on the button, and any padding on it.

#something div {
    float: left;
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    border: none;
    padding: 0;
}

However, as the button in question has a fixed-pixel on-page size, you don't really need to use nested backgrounds at all. You can just make one background of the right dimensons for the button.