How can I make it smooth when you click a GUI

Hello! How can I make it when you click, it smoothly goes down when you click? I gave an example down below!

This is what mine does:

An example of what I would want:


(Also excuse the quality, my OBS Settings are just terrible)

This is the script that I am using

local TextButton = script.Parent
-- When you hover
TextButton.MouseEnter:Connect(function()
	TextButton.Size = UDim2.new(0.965, 0, 0.297, 0) --increase size
end)

TextButton.MouseLeave:Connect(function()
	TextButton.Size = UDim2.new(0.925, 0,0.287, 0) --decrease size
end)
-- When you click
TextButton.MouseButton1Click:Connect(function()
	wait(0.1)
	TextButton.Size = UDim2.new(0.834, 0, 0.256, 0) --decrease size
end)

Thanks! Any help will be appreciated! :grinning_face_with_smiling_eyes:

1 Like

You can smoothen/fine tune UI through use of the “TweenService”.

1 Like

How can I make it more responsive??

local TextButton = script.Parent
-- When you hover
TextButton.MouseEnter:Connect(function()
	script.Parent:TweenSize(UDim2.new(0.965, 0, 0.297, 0),"Out","Quint",1)
	-- TextButton.Size = UDim2.new(0.965, 0, 0.297, 0) --increase size
end)

TextButton.MouseLeave:Connect(function()
	script.Parent:TweenSize(UDim2.new(0.925, 0,0.287, 0),"Out","Quint",1)
	-- TextButton.Size = UDim2.new(0.925, 0,0.287, 0) --decrease size
end)
-- When you click
TextButton.MouseButton1Click:Connect(function()
	wait(0.1)
	script.Parent:TweenSize(UDim2.new(0.834, 0, 0.256, 0),"Out","Quint",1)
	-- TextButton.Size = UDim2.new(0.834, 0, 0.256, 0) --decrease size
end)

(I fixed it)