Godot - Making a Button Corners Round
This code example shows how to make the corners of a circular Button node round using GDScript.
By default, Button nodes do not have rounded corners.
To set the corner radius, you need to update the StyleBox for each state: default, hover, pressed, and focus, using add_theme_stylebox_override()
.
The original StyleBox is obtained with get_theme_stylebox()
.
You can adjust the roundness of the corners using set_corner_radius_all()
.
# Create a Button node
var button = Button.new()
add_child(button)
button.set_text("Button")
button.set_size(Vector2(200, 200))
# Default
var normal_style = button.get_theme_stylebox("normal")
normal_style.set_corner_radius_all(20)
button.add_theme_stylebox_override("normal", normal_style)
# Hover
var hover_style = button.get_theme_stylebox("hover")
hover_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("hover", hover_style)
# Pressed
var pressed_style = button.get_theme_stylebox("pressed")
pressed_style.set_corner_radius_all(20)
button.add_theme_stylebox_override("pressed", pressed_style)
# Focus
var focus_style = button.get_theme_stylebox("focus")
focus_style.set_corner_radius_all(20)
button.add_theme_stylebox_override("focus", focus_style)