How to make a button in roblox

In Creating a Score Bar, you built a basic GUI to display information. In this course, you’ll learn how to make on-screen buttons that can be used for menus, interface actions, and more.

Button Types

There are two types of button objects that can be used in your GUI design:

TextButton	ImageButton
A TextButton is similar to a TextLabel except that players can activate it with a click/tap. It also shares many of the same visual properties — font, background color, stroke color, etc.	An ImageButton is like an interactive version of the ImageLabel object. It also shares most of the same properties as its non-button counterpart.

Creating a Button

The following steps show how to add an ImageButton to the screen and flip it between three appearances depending on the player’s interaction.

1. In the Explorer window, hover over the StarterGui object, click the

   
   button, and insert a ScreenGui.
   

2. Select the new ScreenGui object and, in a similar way, insert an ImageButton.

   

   This will add an empty image button to the corner of the game view.

   

3. As a best practice, rename the new button according to its purpose, for example MapButton.

   

Size

For the button to dynamically resize on various devices and screens, it’s best to use Scale properties.

1. In the Properties window, locate the Size property and click the arrow to expand its tree.

   

2. Set the following size properties:

   

3. Constrain the button to a square bounding box by setting SizeConstraint to RelativeYY.
   

   

Scaling

The current size should work nicely on a phone, but the X/Y scale of 0.15 (15%) may appear too large on a computer screen. To correct this, you can add a UISizeConstraint.

1. Hover over the MapButton object and insert a UISizeConstraint.

   

2. Select the new size constraint object and set its MaxSize property to 90, 90.

   

Position

Buttons should typically be moved within a player’s thumb reach on mobile devices, for instance the lower-right area of the screen.

1. Change the button’s AnchorPoint property to 0.5, 1 so that positioning will be based around its bottom-center point.

   

2. Expand the button’s Position tree and set the following property values. This will move the button near the default jump button that appears on phones/tablets.

   
   

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.

Setting these appearances can be done through the Image, HoverImage, and PressedImage properties.

1. Locate the button’s Image property and paste in rbxassetid://6025368017, or use your own asset.

   

2. For the HoverImage property, paste in rbxassetid://6025452347.

   

3. For the PressedImage property, paste in rbxassetid://6025454897.

   

Styling

To finalize the button’s appearance on screen, make the following adjustments:

1. Set BackgroundTransparency to a value of 1 to make the background transparent.

   
   

2. Rotate the button slightly by setting Rotation to -5.

   
   

Button Functionality

The final task is hooking up basic button functionality.

1. In the Explorer window, hover over the MapButton object and insert a LocalScript. This will create a new LocalScript and show it.

   

2. In the script, copy and paste in these new lines:

   local button = script.Parent local function onButtonActivated() print("Button activated!") -- Perform expected button action(s) here end button.Activated:Connect(onButtonActivated)

This simple button script 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 the ImageButton, the parent of the script.
• The onButtonActivated function handles 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 Activated event. This will cause the function to run every time a player activates the button in game.

Although there are several different events which you can connect to buttons, the Activated event is the most reliable for basic buttons, providing standard button behavior on all platforms from PC to phone/tablet to console.

If the button doesn’t work as expected, check the following:

• Make sure you used a client-side LocalScript, not a server-side Script.
• Ensure that the LocalScript is a direct child of the button object (not a child of the ScreenGui container).
• Confirm that your button’s Image, HoverImage, and PressedImage properties are set to the appropriate image assets.

10 min

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

1. In the Explorer window, hover over the StarterGui object, click on the circle
   
   button, and insert a ScreenGui object.
2. 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.

You can use these menu buttons for testing — simply right-click each one and select Save Image As... to save them to a convenient location on your computer.

Instead of uploading each image separately, use the Asset Manager to upload multiple assets at once:

1. If it’s not already open, click Asset Manager from the View tab.

1. Click the Import button near the top of the window.

1. Find the three images on your computer, select them, and confirm that you’d like to upload them.
2. When finished uploading, double-click the Images folder or select Images from the “tree view” menu.

Inside the folder, you should see the new images:

Setting the three appearances for the button can be done through the ImageButton object.

1. In the Explorer window, select the new ImageButton object.

1. In the Properties window, click on the Image property and select the ImgButtonNormal asset.

1. Click on the HoverImage property and select the ImgButtonHover asset.

1. 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:

1. In the Properties window, set BackgroundTransparency to a value of 1 to make the background transparent.

1. 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.

1. 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.

1. 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 the ImageButton, 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 the GuiButton/Activated|Activated event. This will cause the function to run every time a player activates the button in game.

Although there are several different event types which you can connect to buttons, the 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.

If the button doesn’t work as expected, check the following:

• Make sure you used a client-side LocalScript, not a server-side Script.
• Ensure that the LocalScript is a direct child of the ImageButton object (not the top-level ScreenGui parent).
• Confirm that your ImageButton object's Image, HoverImage, and PressedImage properties are set to the appropriate image assets.

Tags: