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

M

m4.s

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



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:




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:





Suggestions will be appreciated.

Thanks.
 
Sort by date Sort by votes

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
M

m4.s

Member
Licensed User
Longtime User

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



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
M

m4.s

Member
Licensed User
Longtime User
stevel05 said:
Is the Icon a text Icon (Font awesome or material Icon) ?
Click to expand...


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:

MenuBar Create Dynamically FontAwesome Icon

Example creating dynamically FontAwesome icons for a MenuBar. This solution, see Sub TextToImage, uses a label which font is set to FontAwesome, add to a pane, followed by a screenshot which creates the image and then make the label invisible. The image is added to the menu items via a list...
www.b4x.com

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):



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
M

m4.s

Member
Licensed User
Longtime 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:

-- (on hover} -->


Many thanks Steve!
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Article
B4J Code Snippet [SithasoDaisy TailwindCSS] Navmenu for Desktop, Navdraw for mobile
Replies
0
Views
1K
MichalK73
C
  • Article
B4J Library [Custom View] Year Planner View
Replies
0
Views
1K
Chris2
C
  • Article
B4J Tutorial [ABMaterial/BANano] Making BANano Libraries for ABMaterial
2
Replies
34
Views
5K
Blueovalman
B
K
  • Question
B4J Question Mouse pointer becomes difficult to see when hovering over textarea
Replies
6
Views
1K
kostefar
K
  • Article
B4J Library Replacement TitleBar
2 3
Replies
44
Views
8K
stevel05
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…