Material Box

Material Box

WEB Design & Material Images

Godot - Creating a Circular Button

Godot

This code example shows how to create a circular Button node using GDScript.


To create a circular Button node, use `add_theme_stylebox_override()` to specify a new `StyleBoxFlat` for each element: default, hover, pressed, and focus.
The value of `StyleBoxFlat` stored in a variable will be reflected in the changes, so create them individually without using the same variable.
You can adjust the roundness of the corners using `set_corner_radius_all()`.
To make a circle, specify half the size of the Button in `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 = StyleBoxFlat.new()
normal_style.set_bg_color(Color("#696969", 1))
normal_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("normal", normal_style)

# Hover
var hover_style = StyleBoxFlat.new()
hover_style.set_bg_color(Color("#000000", 1))
hover_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("hover", hover_style)

# Pressed
var pressed_style = StyleBoxFlat.new()
pressed_style.set_bg_color(Color("#696969", 1))
pressed_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("pressed", pressed_style)

# Focus
var focus_style = StyleBoxFlat.new()
focus_style.set_border_width_all(2)
focus_style.set_border_color(Color("#fff", 1))
focus_style.set_bg_color(Color("#696969", 1))
focus_style.set_corner_radius_all(100)
button.add_theme_stylebox_override("focus", focus_style)

Godot

TitleGodot - Creating a Circular Button

CategoryGodot

Created

Update

AuthorYousuke.U