Current Webkit, Firefox and Opera support border-image CSS which allows creating fancy buttons with advanced border. The problem is that IE9 will likely not support this CSS3 element. By fancy buttons I means ones with cannot be easily done with combination of box-shadow, border-radius and gradients (or if it is not available using box-shadow inset). More of creating such buttons you will find on
Opera's Beutiful UI Styling with CSS3 article. It is the simpler route if you do not need extra fanciness as there is no images involved.
Of course there are old tricks to get fancy buttons work in all browsers by creating <a> with <span> tag. But suppose we only want to have an <a> tag. In addition we want to have the button universally stretchable. Border-image allows stretching horizontally and vertically but for most buttons only X axis is important so lets go that route.
In standard solution working for current Chrome & Safari, Firefox 3.6+ and Opera 11 you just have to have 9 slice image and add below CSS:
a.button.bi {
border-width: 0 12px;
-webkit-border-image: url(button.png) 0 12 0 12;
-moz-border-image: url(button.png) 0 12 0 12;
-o-border-image: url(button.png) 0 12 0 12;
border-image: url(button.png) 0 12 0 12;
}
If we do the above on IE9 beta and have both white background and white button text, we see nothing (
top example on demo page). Making it to work on IE9 (and with some additional work also on IE8) requires much more work:
a.button.mb {
margin: 0 22px;
position: relative;
background: url(button.png) center repeat-x;
-moz-background-size: 300% 100%;
-o-background-size: 300% 100%;
-webkit-background-size: 300% 100%;
background-size: 300% 100%;
}
a.button.mb:after, a.button.mb:before {
content: " "; /* this is char, not a normal space char*/
top: 0;
display: block;
position: absolute;
width: 12px;
height: 46px;
background: url(button.png) no-repeat;
}
a.button.mb:before {
left: -12px;
background-position: top left;
}
a.button.mb:after {
right: -12px;
background-position: top right;
}
Please see that we are still using exactly the same slice image (it should be a little wider for reasons mentioned below). The approach has some limitations:
- stretching with background size is not the same as border-image stretch
- Opera 11 does not play nicely with background-size above 300%, a bug maybe?
- pattern in the button must allow stretching & repeating, but most of the time it is the case also for border-image (but you an choose stretching OR repeating ;)
If we remove background-size and use very wide button background, we also get support on IE8 if we need to.
Demo page has the second version shown as the bottom image. In addition you can see the used button image.