Material Box

Material Box

WEB Design & Material Images

Godot - Making a Button Corners Round

Godot

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)

Godot

TitleGodot - Making a Button Corners Round

CategoryGodot

Created

Update

AuthorYousuke.U