Vista Style Buttons CSS
2008-03-11
Resizable Vista style buttons with a gradient in XHTML/CSS
As I had to spend an entire afternoon trying to get these to work I might as well post them
To get your lovely Vista Style buttons just screen shot Vista or make a rectangle with 2 gradients that meet.. then add a boarder and blend the corner pixels onto whatever backdrop you want to put them on.
- Cut the edge off one side upto the point where repetition starts (i.e. where the bevel or boarder ends)
- save this as an image-left.* then flip it horizontally and save it as image-right.*
- then take the next column of pixels along that starts the repetition - take 1px width and save as image-centre.*
- if you want to make hovers repeat the process with an alternate image
Vista Button CSS
.buttonLeft {
background-image: url(button-right.gif);
background-repeat: no-repeat;
background-position: top right;
display:block;
float:left;
/*external border spacing*/
margin:4px;
}
.buttonRight {
background-image: url(button-left.gif);
background-repeat: no-repeat;
background-position: top left;
display:block;
}
.buttonCentre{
/*line-height pushes the display block to the full height of the containing image*/
line-height:26px;
/*Inner boarders*/
margin-left:4px;
margin-right:4px;
background-image: url(button-centre.gif);
background-repeat: repeat-x ;
background-position: top left;
display:block;
}
span.buttonCentre:hover{
background: url(button-centre-hover.gif) ;
}
span.buttonLeft:hover {
background-image: url(button-right-hover.gif);
}
span.buttonRight:hover {
background-image: url(button-left-hover.gif);
}
And then all you have to do is make a few containing spans and you have your buttons
<span class="buttonLeft">
<span class="buttonRight">
<span class="buttonCentre">
buttonText
</span>
</span>
</span>
To conclude - these buttons are infinitely horizontally resizable and do display properly - however the hover does not work perfectly, if you hit the outer nested elements they will hover without making the internal elements hover..