I'm developping a web application. In it, I have to create a horizontal menu which is composed of 5 buttons. Each button has to contain a background image and a text which is before this image.
Furthermore, my buttons must have 3 states with 2 different backgrounds. Indeed, each button can be disabled (with a specific background), clickable (with a specific background) or pressed (with the same background that a clickable button).
So, my question is how can I make this, and what components are the best for doing this ?
I tried to use IconButton (were the button is a image) but I'm little lost in how I can manage the states. Can anyone help me ?
I've also seen that toggleButtons are existing, but I'm lost in using it, I don't knw how I can put a background image in it.
My buttons are not the same as these which are presented in the examples. In mine, The text is before the background (not at the top, thre left, the right or the bottom).
And they can have 3 different background dpeending on the situation :
1 - When the button is clicked (after a mouse click), a background is displayed.
2 - When the mouse come over the button (the mouse pass over he button) and this last is activable, the same background that the first situation is displayed.
3 - When the button is desactivated (not clickable) another background is displayed.