Material Box

Material Box

WEB Design & Material Images

Godot - Adding a Border to a Button

Godot

This code example demonstrates how to add a border to a Button node using GDScript.


To make a Button node have a border, you need to get the style for each state (default, hover, pressed, and focus) using `get_theme_stylebox()`. Then, you can override the border properties and update the style using `add_theme_stylebox_override()`.

The focus state has a default border, so you only need to modify the other states.

# 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_border_width_all(2)
normal_style.set_border_color(Color("#fff", 1))
button.add_theme_stylebox_override("normal", normal_style)

# Hover
var hover_style = button.get_theme_stylebox("hover")
hover_style.set_border_width_all(2)
hover_style.set_border_color(Color("#fff", 1))
button.add_theme_stylebox_override("hover", hover_style)

# Pressed
var pressed_style = button.get_theme_stylebox("pressed")
pressed_style.set_border_width_all(2)
pressed_style.set_border_color(Color("#fff", 1))
button.add_theme_stylebox_override("pressed", pressed_style)

Godot

TitleGodot - Adding a Border to a Button

CategoryGodot

Created

Update

AuthorYousuke.U