How can I make this button? Thanks!
1 Like
Well it has to be a textbutton or image button, or put a transparent button over it. Then you can script for when it’s clicked:
local button = script.Parent --assuming this script is inside the button
button.MouseButton1Click:Connect(function()
--code here
print("clicked")
end)
1 Like
oh, sorry for not being clear enough, I wasn’t concerned about the scripting aspect, but rather how to make it. I’ve never really made anything with UI before, so I need some help. Thanks!
1 Like
oh just add a screengui in starter gui with a frame inside it and a button inside the frame. if you want the round part put UI corner object inside the frame. it seems like it uses an image label + text label or one of those is a button instead of a label, or you can have both of them be labels and put a transparent button over it
Create a ScreenGui inside StarterGui and add an image, textlabel and a textbutton. Cover the image and textlabel with the button and set its visibility to false.
its a little complicated, but follow these steps
make a frame a and set its size to scale 0.25, 0.25.
make a UIAspectRatioConstant and parent it to frame a
add a Ui corner to frame a and configure using scale
now make a text label a parent it to frame a
add UiCorner to text label a and configure to your needs
add a frame b parented to text label a, set it size to scale 1, and the scale y should match the scale of the ui corner parented to this. set its position = 0, 1, pivot = 0, 1
set the text label a size to scale 0.9, 0.75 with bgcolor white bgtrans 0
set the frame a bgcolor to black and bgtrans = 0
create a new text label b parented to frame a with size scale 0.9, 0.15 with bgtrans = 1, textcolor = white,
textscaled = true (use uipadding to change the text size)
dont forget to add UiListLayout to frame a
if this is too complicated, make a image button and just upload this image and set the image asset I’d to the uploaded image asset ID
You lost me. Can you add bullet points? I’m stuck on this step: " add a frame b parented to text label a , set it size to scale 1, and the scale y should match the scale of the ui corner parented to this. set its position = 0, 1, pivot = 0, 1"
1 Like
I’ll rework the
tutorial to be more clear here
I’m on mobile right now so I can’t edit the place file
First, add a Frame A with the following properties :
- Background Color : Black
- Size : {0.25, 0}, {0.25, 0}
Next, add a UICorner to Frame A,
- Corner (or something like that i forgot) : 0.15, 0
Also add UIAspectRatioConstant to Frame A
Add a Text label A, Parented to Frame A.
- Default properties
Now, add a UICorner to Text label A, set its properties so that it looks like ime image above.
- Default properties
Add a Frame B, Parented to Frame A
- Size : Scale > X = 1, Scale > Y should we the same as the UiCorner scale of Frame A
Now add a Text label B Parented to Frame A
- Background trans : 1
- Text Color : White
- Size : 0.9 0 0.1 0
- Pivot : 0 1
- Position : 0 0 0.9 0
it should be done now, if any issues screenshot
the explorer tree should look like :
Starter gui
----ScreenGui
--------Frame A
------------UICorner
------------UIAspectRatioConstant
------------Text label A
----------------UICorner
----------------Frame B
------------Text Label B
Here, it says frame B parented to frame a, while in the post below, it says frame B is parented to Text Label A. Which one is it? Thanks!
Here’s my result…
I think I missed something somewhere…
Here’s the updated file that you can use when you get onto a computer, no rush 
helpPlz.rbxl (58.1 KB)
Thanks!
For some reason, my corners aren’t rounded. I think because of the text button on top still having square corners. But I don’t want to have rounded corners on my text button because then I have rounded corners on the top of my text button. Also, I’d like a border like in the picture. Thanks!
also, make sure to enable this if you want it to not get pushed down
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.