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.
Button Types
Text Button
A 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.

Image Button
Similarly, an 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.

Upload Images
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.



Set Appearances
Setting the three appearances for the button can be done through the ImageButton
object.
- 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
LocalScript
and 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
button
which tells the script what specific object it’s linked to. In this case it’s linked to theImageButton
, the parent of the script. -
The
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 theGuiButton/Activated|Activated
event. This will cause the function to run every time a player activates the button in game.
GuiButton/Activated|Activated
event 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-sideScript
. - Ensure that the
LocalScript
is a direct child of theImageButton
object (not the top-levelScreenGui
parent). - Confirm that your
ImageButton
object's Image, HoverImage, and PressedImage properties are set to the appropriate image assets.