Material Box

Material Box

WEB Design & Material Images

Godot - Making a Button Background color Transparent


This code example shows how to make a Button node Background color transparent using GDScript.

To make a Button node transparent, you can use `add_theme_stylebox_override()` to assign `StyleBoxEmpty` to each element.
This will remove the background color of the Button, so you will need to set the text color for when the Button is hovered over and pressed.
Use `add_theme_color_override()` to specify the values for the `font_hover_color` and `font_pressed_color` properties.

# Create a Button node
var button =
button.text = "Button"

# Create a StyleBoxEmpty
var stylebox_empty =

# Default background color
button.add_theme_stylebox_override("normal", stylebox_empty)
# Background color on hover
button.add_theme_stylebox_override("hover", stylebox_empty)
# Background color when pressed
button.add_theme_stylebox_override("pressed", stylebox_empty)
# Background color when disabled
button.add_theme_stylebox_override("disabled", stylebox_empty)
# Focus border color
button.add_theme_stylebox_override("focus", stylebox_empty)

# Set the text color on hover
button.add_theme_color_override("font_hover_color", Color("#F00", 1))
# Set the text color when pressed
button.add_theme_color_override("font_pressed_color", Color("#000", 1))


TitleGodot - Making a Button Background color Transparent