Question

Is there any way that we can style individual buttons in ButtonBar in Flex

Answer 1

This may be a little late but here goes an answer that may help others.

In a button bar you can use 3 styles: style for the first button (property: firstButtonStyleName), the last button (property: lastButtonStyleName) and the other buttons (property: buttonStyleName).

For each property, you would simple have to create a corresponding style as if you were styling a single button.

It would give you sth like this…

<mx:ButtonBar buttonStyleName="topButtonBarButtonStyle"/>

style.css:

.topButtonBarButtonStyle{
    fill-colors: #ffffff, #b8b9b9, #b8b9b9, #ffffff;
    border-color: #E6E6E6;
    theme-color: #E6E6E6;
}

With this, I get for each button the following style: borders in #e6e6e6 color, a gradient from #ffffff to #b8b8b9 when the button is in normal state, a reverted gradient when the user rolls over the button.

And this does the trick 🙂