Godot - Adding a Shadow to a Button

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

To add a shadow to a Button node, you need to get the style for each state (default, hover, pressed, and focus) using get_theme_stylebox(). Then, you can set the shadow properties using set_shadow_color(), set_shadow_size(), and set_shadow_offset(), and update the button style using add_theme_stylebox_override().

# 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_shadow_color(Color("#000", 1))
normal_style.set_shadow_size(1)
normal_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("normal", normal_style)

# Hover
var hover_style = button.get_theme_stylebox("hover")
hover_style.set_shadow_color(Color("#000", 1))
hover_style.set_shadow_size(1)
hover_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("hover", hover_style)

# Pressed
var pressed_style = button.get_theme_stylebox("pressed")
pressed_style.set_shadow_color(Color("#000", 1))
pressed_style.set_shadow_size(1)
pressed_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("pressed", pressed_style)

# Focus
var focus_style = button.get_theme_stylebox("focus")
focus_style.set_shadow_color(Color("#000", 1))
focus_style.set_shadow_size(1)
focus_style.set_shadow_offset(Vector2(10, 10))
button.add_theme_stylebox_override("focus", focus_style)

By default, Button nodes have a transparent background. If you want to make the background opaque, use set_bg_color() to set the background color.

# To make the background opaque
normal_style.set_bg_color(Color("#000", 1))