B4J Question How to invert/reverse button colors on mouse hover via CSS?

m4.s

Member
Licensed User
My B4J application has several toolbar buttons like this one:

btn.PNG


When a user hovers the mouse over any of these buttons, I'd like to give them effective user feedback by inverting/reversing the button image's color to yield something more like this:

btn-inverse.PNG



Currently, I use this CSS code to at least provide lesser user feedback on mouse hover:

B4X:
.button:hover {
    -fx-background-color: -fx-shadow-highlight-color, rgb(177,129,11), -fx-inner-border, rgb(200, 200, 200);
}

which yields:

btn-onhover.PNG




Suggestions will be appreciated.

Thanks.
 

stevel05

Expert
Licensed User
Longtime User
If you are happy with a plain background when hovered try:
B4X:
.button:hover {
    -fx-background-color: black;
     -fx-text-fill: white;
}
You can obviously change the colours to suit.
 
Upvote 0

m4.s

Member
Licensed User
If you are happy with a plain background when hovered try:
B4X:
.button:hover {
    -fx-background-color: black;
     -fx-text-fill: white;
}
You can obviously change the colours to suit.

Thank you for the quick reply stevel05, but I had already tried same - with it yielding an undesired:

Capture.PNG


I thought the solution might entail the use of -fx-base and/or -fx-hover-base (only for button:hover, not .root); yet no combo is working for me.

*Note: FYI, this is my .root CSS:

B4X:
.root {
    -fx-accent: rgb(200, 200, 200);
    -fx-selection-bar-non-focused:rgb(200, 200, 200);
    -fx-focus-color : gray;
    -fx-faint-focus-color: transparent;
}

and I have/load no other button-specific CSS.
 
Last edited:
Upvote 0

stevel05

Expert
Licensed User
Longtime User
Is the Icon a text Icon (Font awesome or material Icon) ?
 
Last edited:
Upvote 0

m4.s

Member
Licensed User
Is the Icon a text Icon (Font awesome or material Icon) ?


Yes. Apologies I did not mention that.

I use FontAwesome icons for most of my menu, toolbar and navigation buttons. This after I found the following forum post from Erel:


My applications's TextToImage function has some slight variations:

B4X:
Sub TextToImage(p As Pane, s As String, FontSize As Double) As Image
    Dim img As Image
    Dim lbl As Label
    
    lbl.Initialize("lbl")
    lbl.Font = gFX.CreateFontAwesome(FontSize)
    lbl.Text = s
    p.AddNode(lbl, -1, -1, -1, -1)
    img = lbl.Snapshot2(gFX.Colors.Transparent)
    lbl.Visible = False
    
    Return img
End Sub

But I just experimented, and if I replace line 9 with
B4X:
img = lbl.Snapshot
instead, your suggested changes yield (3 button examples this time):

Capture1.PNG
Capture2.PNG
Capture3.PNG


Closer, but not the ultimate solution.

It seems setting the background as transparent (at label snapshot time, as above at least) prevents the revised CSS from working properly/fully.
 
Upvote 0

stevel05

Expert
Licensed User
Longtime User
The -fx-text-fill CSS will not work on an image. Which library / Control are you using to create the toolbar? If you can access the buttons directly then you can add the icon as text and the CSS will work.
 
Upvote 0

m4.s

Member
Licensed User
I don't use any library or special control for the tool/nav bars.

However, you made me realize that I don't need to call my TextToImage function for the application toolbar and navigation buttons; I only need to for my menu item images.

Thus your recommended CSS actually does the trick; although I changed my mind on the colors, and enhanced a bit for the additionally desired border effect:

B4X:
.button:hover {
    -fx-background-color: white, rgb(177,129,11), -fx-inner-border, black;
    -fx-text-fill: rgb(177,129,11);
}

to now yield:

Capture4.PNG
-- (on hover} -->
Capture5.PNG



Many thanks Steve!
 
Upvote 0
Top