This demonstration shows how it's done. Although the goal is a simple one, some of the gotchas with regard to state changes in the buttons are tricky to work out. But once you do, here's what the end result looks like.
The key to making these buttonset style adjustments is making the labels display as block. Also supplying the surrounding
divcontainer with a
width. That gives us the basic change we're after in terms of alignment. The trick part is making this layout work with the hover and the active states. These state classes are added to the label elements by the buttonset widget.
Since these labels belong to a tightly-knit group, the top and bottom borders are pressed up against one another. That's easy enough to take care of by applying a
transparenttop or bottom border to certain elements, depending where they are in relation to other elements, and the state of those other elements. The part I couldn't figure out for the life of me was the hover state. My selector worked just fine, as I was hoping to handle all the border hacks using just CSS, but the property change just wouldn't take.
mouseleaveevents, which just adds, then removes, the
ui-transparent-border-topclass. Strange that this approach works and the CSS-based one did not.