Question

I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that’s why I ask does anybody remember the technique.

There is left side picture i.e

And then very wide body image which ends up with right curved border/shadow like this :

So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.

Does anybody knows how this technique is called or can refer me to the link? or give me code example, I’d appreciate any of those

Answer 1

This technique is a variation of the “Sliding Doors” technique:

• http://www.alistapart.com/articles/slidingdoors/
• http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
• http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

Basically you use markup like this:

<button><span>Text</span></button>

Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:

button {
    background:url(main-image.png) top right no-repeat;
    border:0;
    padding:0;
    width:80px;  /* with only 1 "door", you might need to set a width */
    /* other resets may be necessary */
}
span {
    background:url(left-door.png) left top no-repeat;
}
button, span {
    height:37px; /* height of your sprite */
    display:block;
}​

Demo: http://jsfiddle.net/Kqs3m/

Your results may vary depending on your sprites and the natural width of the content.