### Create Transparent Icon Button

To create a transparent button with an image in a toolbar, various options.
B4J Visual Designer and CSSUtils Library
Select CSSUtils in the B4J IDE Library Manager.
Set the Style
Dim MyButton as Button
CSSUtils.SetStyleProperty(MyButton, "-fx-background-color", "transparent")
or
CSSUtils.SetBackgroundColor(MyButton, fx.Colors.Transparent)
Add the Image to the Button in the B4J Visual Designer
Button > Properties > Background Properties: Set
Drawable: Bitmap
Image File: Select a file from the files list. Copy the image to the files folder and add to the files list.
Gravity: Center
B4J Code and CSSUtils Library
Select CSSUtils in the B4J IDE Library Manager.
' Add an icon, located in the files folder (dirassets ) to a button. The icon position is center.
' Example: AddButtonIcon(btnAdd, "list-add.png")
`Sub AddButtonIcon(btn As Button, icon As String)
CSSUtils.SetStyleProperty(btn, "-fx-background-color", "transparent")
CSSUtils.SetStyleProperty(btn, "-fx-background-position","center")
CSSUtils.SetStyleProperty(btn, "-fx-background-repeat", "no-repeat")
Dim iconpath As String = File.GetUri(File.DirAssets, icon)
CSSUtils.SetStyleProperty(btn, "-fx-background-image", $"url('${iconpath}');"$)
End Sub`
Define the CSS style in a CSS file (Files Folder)
/*
* CSS for B4J Project
*/
.button-items {
-fx-background-color: transparent;
}

Changed: 2017-12-22 17:20, Category: Buttons, File: T6C167M1230.htm, ID: 1230