Your own buttons and interface (GUI)
Menus, buttons and displays on the screen are called GUI in Roblox. Here you build your first button that reacts to clicks – on computers and on phones.
What you’ll learn
- create a ScreenGui with a TextButton
- react to clicks with a LocalScript
- choose sizes with Scale so it fits on phones
Create a button
In the Explorer: StarterGui → + → ScreenGui, inside it + → TextButton. Everything in StarterGui appears on every player’s screen. In Properties you change text, colour and font.
React to clicks
Put a LocalScript into the TextButton – interfaces run on the player’s device. Activated works with mouse, finger and controller.
local button = script.Parent
local clicks = 0
button.Activated:Connect(function()
clicks += 1
button.Text = "Clicked: " .. clicks
end)Fits on phones too
Size and position have two parts: Scale (share of the screen) and Offset (pixels). Use Scale for buttons, e.g. size {0.3, 0},{0.1, 0} – then the button is a third of the width on every screen. Many Roblox players play on phones!
🛠️ Try it
Build a “Hello!” button that changes colour on every click (button.BackgroundColor3 = Color3.fromRGB(…)). Test on a phone screen with the device preview in Studio.
🧠 Mini quiz
Where does the interface go so every player sees it?
Everything in StarterGui is copied to every player’s screen when they join.
Why Scale instead of Offset for buttons?
Scale is a share of the screen – pixel sizes are often too big or too small on phones.
✓ Lesson done! On to the next one.
Roblox and Roblox Studio are trademarks of the Roblox Corporation. mahshid.de is not affiliated with Roblox. All links to Roblox lead to the official sites.