Creating GUI Buttons
Creating GUI Buttons
This article expands on the
articles/Using Images in GUIs|Using Images in GUIs tutorial and demonstrates how to make on-screen buttons that can be used for menus, in-game actions, and much more.
TextButton is very similar to a
TextLabel, except that a player can activate it with a click/tap. Internally, it also shares many of the same visual properties as a text label — font, background color, stroke color, etc.
ImageButton is like an interactive version of the
ImageLabel object and it uses a custom image that you upload to Roblox. It also shares most of the same properties as its non-button counterpart.
Creating a Button
The remainder of this article demonstrates how to add an
ImageButton to the screen and flip it between three appearances depending on the player’s interaction.
Add an ImageButton
- In the Explorer window, hover over the StarterGui object, click on the circle button, and insert a ScreenGui object.
- Select the new ScreenGui object and, in a similar manner, insert an ImageButton.
This will add an empty image button to the corner of the game view.
This button needs three custom images — its normal appearance on the screen, a hover-over appearance, and a final image for when the player presses it.
Instead of uploading each image separately, use the Asset Manager to upload multiple assets at once:
- If it’s not already open, click Asset Manager from the View tab.
- Click the Import button near the top of the window.
- Find the three images on your computer, select them, and confirm that you’d like to upload them.
- When finished uploading, double-click the Images folder or select Images from the “tree view” menu.
Setting the three appearances for the button can be done through the
- In the Explorer window, select the new ImageButton object.
- In the Properties window, click on the Image property and select the ImgButtonNormal asset.
- Click on the HoverImage property and select the ImgButtonHover asset.
- Click on the PressedImage property and select the ImgButtonPressed asset.
Adjust the Button
To finalize the button’s appearance on screen, make the following adjustments:
- In the Properties window, set BackgroundTransparency to a value of 1 to make the background transparent.
- Move the button slightly away from the corner by setting both Position → X → Offset and Position → Y → Offset to around 50.
Attach a LocalScript
The final task is hooking up basic button functionality.
- In the Explorer window, hover over the ImageButton object, click the button, and insert a LocalScript. This will create a new
LocalScriptand show it.
- In the script, copy and paste in these new lines:
This is a basic button script and it works as follows:
The first line sets a variable
buttonwhich tells the script what specific object it’s linked to. In this case it’s linked to the
ImageButton, the parent of the script.
onButtonActivated()function is the primary handler for the button’s activation. Inside it, you should perform the intended action like opening the game’s main menu.
The final line connects the button to the
onButtonActivated()function with the
GuiButton/Activated|Activatedevent. This will cause the function to run every time a player activates the button in game.
GuiButton/Activated|Activatedevent is the most reliable for basic buttons, providing standard button behavior on all platforms from PC to phone/tablet to console.
Troubleshooting the Button
If the button doesn’t work as expected, check the following:
- Make sure you used a client-side
LocalScript, not a server-side
- Ensure that the
LocalScriptis a direct child of the
ImageButtonobject (not the top-level
- Confirm that your
ImageButtonobject's Image, HoverImage, and PressedImage properties are set to the appropriate image assets.