Classic ON and OFF Button, + Effects (Sound & TweenService)

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)
		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)

Let’s add another LocalScript inside our Button. This will be used for the sound effects & for the tweening service.

	script.Parent.Sound:Play() -- Plays the sound on Click

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( size of the button here), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true) -- TweenService + Size

tutorial.MouseLeave:Connect(function() -- Mouse not Hovering

	hoveringON = false -- Setting OFF

	tutorial:TweenSize( the size a little smaller here), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)

“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"
		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"

And now, your button works!

Issues? Get the model here:

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!