How do I put the click area on a button in the foreground?

[Rimjact]

Godot Version

Godot 4.3 Stable Mono (C#)

Question

Hello! I have a TextureButton with enabled toggle_mode property and two another node TextureRect and Label — child’s of TextureButton. So, I use TextureRect and Label for animation of toggle, but the clickable area is partially covered by them. I can only click where these nodes do not overlap the button. How do I place this clickable area in the foreground so that the player can easily click on the button?

This is nodes order:

Control
∟ TextureButton
  ⊢ TextureRect
  ∟ Label

Thanks for any help!

[Mahan]

I don’t understand why you did this, wouldn’t it be better to use two Buttons and manage them through the code?
But now you can create another texturebutton and attach it to the main button with the code.

[Rimjact]

Sorry, I switched from Unity and at the moment I’m migrating and reworking the project already on Godot. I still don’t know much about how to work with UI nodes in Godot. What you means about that?

@Mahan

use two Buttons and manage them through the code?

[Rimjact]

For explaine my question, I will show for why I add TextureRect and Label.

I move Label and TextureRect by tween for show current toggle enabled status and change font color and modulate by code.

[Rimjact]

Ok, I solved it. Thanks @Mahan for help. I change node tree structure:

Control (parent node)
⊢ TextureRect (child)
⊢ Label (child)
∟ TextureButton (child)

I move TextureButton node to Control node and set Z Index of Label and TextureRect nodes to 1.

[Mahan]

Oh, it’s very simple in Godot, just give these two photos to the Texture Button and that’s how it’s all done with a Texture Button, in this case everything works perfectly standard and correct