The articles/Creating Surface GUI|Surface GUIs tutorial showed you how to create basic surface GUIs to showcase signs, illustrations, and other objects in your Roblox game. Now we’ll take the idea further with interactive surface objects that can become in-game buttons, keypad panels, and more.

Create a Basic Part

Like any surface GUI, you’ll need a BasePart to attach it to.

1. Create a block that’s around 2 studs wide and 2 studs deep.

2. In the Explorer window, rename the part to ButtonColumn.

Create a Surface GUI

Now create a surface GUI for the column, but instead of adding it to the part itself, add it to the StarterGui object (remember that this will copy the GUI to each player’s local game session when they join the game).

1. In the Explorer window, hover over StarterGui and click its circle button.
2. Select SurfaceGui from the popup menu to insert it.

Adorn the GUI

This new surface GUI space is part of the StarterGui object but it’s not connected with a part — it’s just floating out in space. To connect the surface GUI to a part, you must set its Adornee property.

1. Select the SurfaceGui object in the Explorer window.
2. In the Properties window, click the Adornee property. This will change your cursor in Studio to a little selection arrow.

3. In the Explorer or the 3D game editor window, click on the ButtonColumn part to set it as the adornee for the GUI.

Add an Image Button

Now let’s add an image button to the surface GUI. These steps will be similar to those in articles/Creating GUI Buttons, so review that guide if necessary.

1. Save the ControlButton.png image below to your computer (right-click it and select Save Image As…).

2. In the Explorer window, select the SurfaceGui object and insert an ImageButton object within it.

3. Select the image button object and click on its Image property in the Properties window. Toward the bottom of the popup window, select Add Image and locate the ControlButton.png image you saved. When the upload is complete, the image should appear on the button column.

Change the GUI Face

By default, a SurfaceGui is placed on the front surface of the part. This isn’t always where you’ll want the GUI to be, so let’s change it.

1. Select the SurfaceGui object (not the image button that’s inside it).
2. In the Properties window, find the Face property and select Top. Now the surface GUI — and the button within it — will be located on top of the column.

Customize the Button

At this point, the button still doesn’t look like what players would expect (it has a white background and it’s too big for the surface). Let’s fix both of these issues and more:

1. Select the image button and set Size to {0.75, 0}, {0.75, 0}.

2. Set AnchorPoint to 0.5, 0.5.

3. Set Position to {0.5, 0}, {0.5, 0}.

4. Change BackgroundTransparency to 1 to make the background invisible.
5. Set Rotation to -90 to make the button point from the front of the column toward the back.

The final result should look like this:

Attach a Local Script

The final task is to connect a function to the button’s GuiButton/Activated|Activated event. The function in this tutorial will just print a message, but in a real game, pressing the button might unlock a door or open an interactive on-screen GUI.

1. In the Explorer window, hover over the ImageButton object and insert a LocalScript.

2. In the new script, delete any existing code and then copy and paste in these new lines: