Welcome! This is my first Tutorial. Today, I’m going to be explaining how to make a Button that changes the Color and the Text on a MouseClick, with some good Tweening & Sound Effects!
Let’s start!
First of all, go to the StarterGui, and add a ScreenGui. Then, add an ImageButton inside it.
You can rename it or not, your choice.
Then, go into the Button’s properties and change the image’s ID to this one: 2851926732
Then, change the Background Transparency to 1.
You will see something like this:
But hey! No worries!
Remain in the ‘Image’, in the Button’s properties, and change the property ‘ScaleType’ to Slice.
Another strange image? No worries again! Just change the SliceCenter to 12,12,12,12 and the SliceScale to 0.5, but you can keep it on 1 if you prefer.
This should be the result:
Now, let’s design the button.
Change the ImageColor3 to this one: 46, 255, 0
If you want, you can add a Shadow, a thing that I didn’t.
Then add two Sounds inside the Button.
Rename the second Sound with “Sound2”
They will have a precise function, one of them will be the protagonist of the MouseHover Sound, the second one will be the protagonist of the click sound.
Now, ids:
Sound 2: 3848738002
Sound: 452267918
Then, add a TextLabel with the ‘Enabled’ Text.
Text Properties that I recommend:
Font: GothamBlack
TextStrokeTransparency: 0.85
TextColor3: White (255, 255, 255)
TextScaled: True
Now, change the size of the Button to {0.162, 0},{0.085, 0}
Note: You gotta scale the size of the button for resizing it in a good way
Now, let’s add a Color2Value inside the Button and assign the value 46, 255, 0 to it.
Then, add a LocalScript inside the Color2 Value.
script.Parent.Parent.MouseButton1Click:Connect(function() -- Connects the click function to the button
if script.Parent.Value == Color3.fromRGB(46, 255, 0) then -- If Statement
script.Parent.Value = Color3.fromRGB (255,98,98)
elseif
script.Parent.Value == Color3.fromRGB(255,98,98) then
script.Parent.Value = Color3.fromRGB(46,255,0) -- Red Color that turns ON when a second click is made after the first one (Disabled State)
end
end)
Let’s add another LocalScript inside our Button. This will be used for the sound effects & for the tweening service.
script.Parent.MouseButton1Click:Connect(function()
script.Parent.Sound:Play() -- Plays the sound on Click
end)
local tutorial = script.Parent -- We define the Button as the parent
local hoveringON = false -- MouseHovering's default state
tutorial.MouseEnter:Connect(function() -- Mouse Hovering ON
hoveringON = true -- Setting ON
script.Parent.Sound2:Play() -- Hovering Sound
tutorial:TweenSize(UDim2.new(Normal size of the button here), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true) -- TweenService + Size
end)
tutorial.MouseLeave:Connect(function() -- Mouse not Hovering
hoveringON = false -- Setting OFF
tutorial:TweenSize(UDim2.new(Make the size a little smaller here), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
end)
“Then, add a TextLabel with the ‘Enabled’ Text.” Let’s now consider this TextLabel added.
Let’s add a LocalScript inside it!
script.Parent.Parent.MouseButton1Click:Connect(function() -- Button MouseFunction defined
if script.Parent.Parent.Color2.Value == Color3.fromRGB(46,255,0) then -- If Statement
script.Parent.Parent.ImageColor3 = Color3.fromRGB(46,255,0)
script.Parent.Text = "Enabled"
elseif
script.Parent.Parent.Color2.Value == Color3.fromRGB(255,98,98) then -- If Statement
script.Parent.Parent.ImageColor3 = Color3.fromRGB(255,98,98)
script.Parent.Text = "Disabled"
end
end)
And now, your button works!
Issues? Get the model here: https://www.roblox.com/library/6236877080/Tutorial
Thank you!
Note: If you install the model, you might see the size of the button a little glitched. It’s because of the TweenService modified and not fixed by me, just follow the instructions above, about the size, you can find them in the script
Hope that it was helpful, for any problem, reply here!