0 votes


I'm a bit stuck when trying to implement an animated button. I feel like there is something easy that I'm missing.
What I'd like to achieve is something like presented in this video:

This is done in unity with a simple label with a rectangle behind and a bit of code to handle all the events. The background rectangle is animated using an animationplayer on hover or select.

Using Godot, I think I should use a Button node to handle all the events, avoid containers to allow for resizing and maybe a NinePatchRect for the background.
But this would never be reusable as the rectangle would need to be sized according to the text of the button. And the button itself must be hidden so it doesn't hide the background.
What do you think? Is there a better way that is maybe less complicated?


Godot version 3.3
in Engine by (16 points)

2 Answers

0 votes

I've just found a way which seem reusable and efficient.

I created a new scene with the following structure:

Button (script)

the textureRect has its layout set to fullrect so it matches the button's size and is set to appear behind its parent
The button itself has all its styles set to StyleBoxEmpty so we don't see its background but we can see its text.
All the necessary events are connected in the script and trigger the animations which affect the scale and modulate of the textureRect.

This scene being a button, I can change its label/size, etc from where it's instantiated and it reacts correctly to any layout container.

by (16 points)
edited by
0 votes


How about a Touchscreen button? I've only used static textures for normal & pressed, but there's an option to have animated textures.

by (1,865 points)

I've never used TouchScreenButton. I'll give it a look in case of but I feel like the solution I posted up there ticks all the boxes.

Thanks for your feeback!

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.