9. TextureButton

We use a CenterContainer to center a VBoxContainer, with 2 childs, TextureButton and Label. For the Label, in the Inspector, we set Align and VAlign as center. We could also have done this with code. However most of the time we will want to use set its properties graphically in the Inspector. This will be faster and you could see the results as well. We have to set margins so it is covers the entire window which we set as 500 by 200 in project settings. For the vbox, set the separator as 50.

These are the nodes used with the names used.

For the TextureButton, we use three images: normal, hover, and pressed. We generate them using GIMP program from File -> Create -> Buttons -> Round Button.

Normal:

Hover:

Pressed:

We attach this script to the Control node where we test for up and down signals emitted by the button.

---

extends Control

var button
var label

func _ready():
    var button_string = "center/vbox/button"
    var label_string = "center/vbox/label"
    button = get_node(button_string)
    button.texture_normal = load("res://button_normal.png")
    button.texture_pressed = load("res://button_pressed.png")
    button.texture_hover = load("res://button_hover.png")
    button.connect("button_down", self, "_on_TextureButton_button_down")
    button.connect("button_up", self, "_on_TextureButton_button_up")
    label = get_node(label_string)
    label.set_text("Waiting...")

func _on_TextureButton_button_down():
    label.set_text("Down state")

func _on_TextureButton_button_up():
    label.set_text("Up state")

The output, with window size of 500,200 and button pressed: