3.2.2 Buttons

Why Buttons Matter in Roblox UI

Buttons are one of the main ways players interact with your game through the screen. A button lets a player say "do this now" without chat commands or key presses. In Roblox, most clickable UI elements are created with TextButton or ImageButton objects inside a ScreenGui.

In this chapter you focus on creating and using buttons, not on general UI concepts or scripting basics that appear elsewhere in the course. You will learn how to place buttons on the screen, adjust their appearance, and detect when the player clicks or taps them.

Creating a Basic Button

To create a basic button, you first make sure you have a ScreenGui in the player’s PlayerGui. Inside that ScreenGui you add a TextButton or an ImageButton. The TextButton shows text on the button, while the ImageButton uses an image.

In Roblox Studio, open the Explorer panel and find StarterGui. Add a ScreenGui under StarterGui if there is not one already. Then select that ScreenGui and insert a TextButton. When the game runs, Roblox will copy this ScreenGui with your TextButton into each player’s PlayerGui, so each player sees and can click their own button.

The moment you add a TextButton, it appears on the screen in the game view. You can drag it around in the UI editor to place it where you want. Its position and size are controlled by its Position and Size properties, which you can edit in the Properties window.

Positioning and Sizing Buttons

Buttons use the same positioning system as other GUI objects in Roblox. Each button has Position and Size properties that include both scale and offset. Scale is a fraction of the screen or parent size. Offset is a fixed number of pixels.

For example, a Size value of UDim2.new(0.2, 0, 0.1, 0) means the button takes 20 percent of the screen width and 10 percent of the screen height, with no pixel offset. If you resize the game window, scaled sizes change with it. This is important for buttons, because you want them to be usable on different screens.

If you drag your button in the UI editor, Roblox updates these properties for you. For more control you can type exact values in the Properties window. This helps you line up buttons so they look consistent, for example a row of equal sized buttons in a menu.

You also control where the button is anchored with the AnchorPoint property. An AnchorPoint of (0.5, 0.5) means the Position is the center of the button. An AnchorPoint of (0, 0) means the Position is the top left corner. For centered buttons, such as a "Play" button in the middle of a main menu, using AnchorPoint = (0.5, 0.5) with a Position of (0.5, 0, 0.5, 0) keeps the button in the center.

Styling TextButtons

A TextButton shows text directly on the button. To make the button look good and easy to read, you adjust its main visual properties.

The Text property controls the label, such as "Play", "Retry", or "Shop". The Font, TextSize, TextColor3, and TextScaled properties affect how that label looks. If you set TextScaled to true, Roblox will automatically adjust the text size to fit inside the button.

The background of a TextButton is controlled by BackgroundColor3, BackgroundTransparency, and BorderSizePixel. A solid colored rectangular button is created by keeping BackgroundTransparency at 0, choosing a color with BackgroundColor3, and using a small BorderSizePixel value or setting it to 0 for a flat look.

You can also round the corners of your button using a UICorner object. Insert a UICorner under the TextButton, and adjust its CornerRadius to change how round the corners appear. This gives a softer style that works well in many modern Roblox games.

For more advanced styling, you can add a UIStroke under the TextButton. UIStroke draws an outline around the button. Its Thickness and Color properties help you create a clear border, which can make the button stand out against the background.

Using ImageButtons

If you want a button that is mostly or entirely an icon, you use an ImageButton. This type of button does not display text by default. Instead, you set an image through the Image property, using an asset ID from Roblox.

Inside the Properties panel for your ImageButton, you can paste an image asset id like rbxassetid://1234567890 into the Image field. The ImageColor3 property tints the image, and ImageTransparency controls how transparent it is.

You can still place text on top of an ImageButton by adding a TextLabel or TextButton as a child of the ImageButton. This is useful if you want both an icon and a word, such as a shop icon with "Shop" written underneath.

Just like TextButton, an ImageButton uses Position, Size, AnchorPoint, and supports UICorner, UIStroke, and other UI layout objects. The difference is that the clickable area is defined by the button rectangle, not by the visible parts of the image. That means even transparent parts of the image still respond to clicks within the rectangular bounds.

Detecting Clicks with MouseButton1Click

Buttons become useful when the game reacts to clicks or taps. Both TextButton and ImageButton provide events that fire when the player interacts with them. The most common one is MouseButton1Click. This triggers when the player finishes a left click on the button, or taps it on a touch device.

To connect a script to this event, place a LocalScript inside the button or inside the ScreenGui, and get a reference to the button. Then use the Connect method on MouseButton1Click.

For example, suppose you have a TextButton named PlayButton inside a ScreenGui. You can write:

local button = script.Parent
button.MouseButton1Click:Connect(function()
    print("Play button was clicked")
end)

This code assumes the LocalScript is a direct child of the button. If the script is higher up in the hierarchy, such as inside the ScreenGui, you find the button by name.

local screenGui = script.Parent
local playButton = screenGui:WaitForChild("PlayButton")
playButton.MouseButton1Click:Connect(function()
    print("Play button clicked from ScreenGui script")
end)

In both cases, when the player clicks or taps the button, the function inside Connect runs on the client. From here you can open menus, close menus, start animations, or fire remote events to the server for game affecting actions.

Hover and Press Feedback

Good buttons show feedback when the player hovers or presses them. Roblox buttons provide several events you can use for this, like MouseEnter, MouseLeave, MouseButton1Down, and MouseButton1Up.

To create a simple hover effect, you can change the background color when the mouse is over the button. For instance:

local button = script.Parent
local normalColor = button.BackgroundColor3
local hoverColor = Color3.fromRGB(255, 220, 120)
button.MouseEnter:Connect(function()
    button.BackgroundColor3 = hoverColor
end)
button.MouseLeave:Connect(function()
    button.BackgroundColor3 = normalColor
end)

For a press effect, you can slightly darken the button or scale it down when the mouse button is pressed. Use MouseButton1Down to start the press effect, and MouseButton1Up or MouseLeave to end it. This gives players a clear sense that their input is being received.

Animations in UI are covered in another part of the course, but even simple color changes already make your buttons feel more polished and responsive.

Enabling and Disabling Buttons

Sometimes you want a button to be visible but temporarily not clickable. Roblox GUI objects have an Active property and a Selectable property. You can also fake disabling a button by disconnecting its events or checking a condition inside the click handler.

A simple approach is to keep a boolean flag in your script. When the flag is false, the button does nothing. When true, it responds normally.

local button = script.Parent
local isEnabled = true
button.MouseButton1Click:Connect(function()
    if not isEnabled then
        return
    end
    print("Button works")
    isEnabled = false
end)

You can also give the player visual feedback that the button is disabled. For example, you might increase BackgroundTransparency, change the text color to gray, or overlay a transparent Frame on top of the button to block interaction.

For keyboard and gamepad users, the Selectable property controls whether the button can be focused. When Selectable is false, the button cannot be chosen with a controller. It is often best to keep all important buttons selectable and coordinate their layout with UI navigation in mind.

Connecting Buttons to Game Actions

Buttons usually trigger meaningful actions. In many cases you will call other functions inside your GUI script when the button is clicked. For actions that must affect the entire game, such as starting a round or giving an item, you typically fire a remote event to the server from the button’s click handler. The details of remote events and server communication are covered later, but the connection starts from the button click.

A common pattern looks like this. The button click event runs on the client and then sends a remote event with any needed data.

local button = script.Parent
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local startGameEvent = ReplicatedStorage:WaitForChild("StartGameEvent")
button.MouseButton1Click:Connect(function()
    startGameEvent:FireServer()
end)

The important part at this stage is understanding that your button is the starting point for many actions. It is the bridge between the player’s decision and the scripts that change the game state.

Common Button Mistakes to Avoid

When working with buttons, beginners often run into the same issues. One common problem is placing a button inside StarterGui but not inside a ScreenGui. UI elements must be children of a ScreenGui to show on the screen. If they are placed directly under StarterGui, they will not appear.

Another issue is using a Script instead of a LocalScript to handle MouseButton1Click in PlayerGui. Scripts in the UI do not run on the server. Use a LocalScript in the player’s GUI for button interaction, then send messages to the server when needed.

Overlap can also cause confusion. If another transparent GUI object covers your button, such as a full screen Frame, it may block clicks even if it is invisible. In that case, adjust the ZIndex values or the hierarchy so your button is on top and receives input.

Finally, remember that buttons still respond to clicks if they are off screen or behind other elements visually, as long as they are visible in the UI tree and not covered by higher ZIndex objects. To avoid surprise interactions, make sure hidden buttons are either moved off the screen properly, have their Visible property set to false, or are disabled in your script logic.

Practicing with Buttons in Your Obby

In your simple obby or other early projects, buttons are an easy way to add user control without complex interfaces. For example, you can add a "Respawn" button that moves the player back to the last checkpoint, or a "Skip Stage" button that teleports them ahead if they meet certain conditions.

To practice, create a ScreenGui, then add a TextButton labeled "Reset Obby". Place a LocalScript inside the button and print a message when it is clicked. Next, change the button’s color when the mouse hovers and when it is pressed. After that, connect the button to an actual action in your game through your existing scripts.

As you continue, the techniques you learned in this chapter will combine with text labels, menus, and scripted UI updates to create full interfaces. Buttons are your basic building block for any kind of interactive UI in Roblox, so spending time to understand how they look, where they go, and how they respond will make the rest of your UI work much easier.