BETA mahshid.de is still being built – things may change or wobble.Still under construction. Feedback
DE
Lesson 11 of 11 · Advanced

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?

Why Scale instead of Offset for buttons?

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.