SLiding Doors CSS Buttons with three images?
I am currently looking for a method to design link buttons with three images instead of two.
Here are examples for methods with two images:
Is it possible to cut off the left corner as well and wrap it in another span? I have tried it, but without much success. The button sometimes breaks in FF depending on its outer containers, floats, etc.
and in IE 6 and 7 it looks weird as well.
Here it is:
<a class="button" href="#"><span>some caption</span><span class="btn_right"></span></a>
background: transparent url(../img/button_left.png) no-repeat left top;
background: transparent url(../img/button_right.png) no-repeat;
background: transparent url(../img/button_middle.png) repeat-x;
padding: 6px 5px;
margin: 0px 0px 0px 8px!important;
Attached are the images I used.
Any help is greatly appreciated!