Make an ImageButton Size Up When Hovering Over

Help and Feedback Scripting Support
1

Hey, howdy, hi, I’ve looked almost everywhere for a tutorial on how to make an ImageButton size up on mouse hover. An example of what im trying to do:


video creds: Turn Based Combat Demo - YouTube

Note: I want the size up to be noticeable but also very subtle. Thank you so much,
8ntlers

3 Likes
2

You can just use TweenService to accomplish this.

Place a LocalScript into your desired button and paste this inside:

--//Services
local TweenService = game:GetService("TweenService")

--//Variables
local ImageButton = script.Parent

--//Controls
local originalSize = ImageButton.Size
local scaleFactor = 1.5
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quint)

--//Functions
ImageButton.MouseEnter:Connect(function()
	local sizeTween = TweenService:Create(ImageButton, tweenInfo, {
		Size = UDim2.new(originalSize.X.Scale * scaleFactor, 
			originalSize.X.Offset * scaleFactor, 
			originalSize.Y.Scale * scaleFactor, 
			originalSize.Y.Offset * scaleFactor
		)
	})
	
	sizeTween:Play()
end)

ImageButton.MouseLeave:Connect(function()
	local sizeTween = TweenService:Create(ImageButton, tweenInfo, {
		Size = originalSize
	})

	sizeTween:Play()
end)

Make sure the button has an anchor point of 0.5, 0.5.

4 Likes
3

Hey, here’s a little something from my own game for ya!

Just put this in a LocalScript inside of your GUI and it should work

local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer

coroutine.wrap(function()
	for _, btn in pairs(localPlayer:WaitForChild("PlayerGui"):GetDescendants()) do
		if btn:IsA("ImageButton") or btn:IsA("TextButton") then
			local buttonSizeX = btn.Size.X.Scale
			local buttonSizeY = btn.Size.Y.Scale

			btn.MouseEnter:Connect(function()
				local newSizeX = (buttonSizeX + 0.05) --// Change this to what you like
				local newSizeY = (buttonSizeY + 0.05) --// Change this to what you like

				local info = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
				tweenService:Create(btn, info, {Size = UDim2.new(newSizeX, 0, newSizeY, 0)}):Play()
			end)

			btn.MouseLeave:Connect(function()
				local info = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
				tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX, 0, buttonSizeY, 0)}):Play()
			end)
		end
	end
end)()
5 Likes