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

Use TweenService to tween the scale value of a UIScale.

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

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

-- Variables
local ImageButton = script.Parent
local UIScale = Instance.new("UIScale", ImageButton)

-- Controls
local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quint)

-- Functions
ImageButton.MouseEnter:Connect(function()
	TweenService:Create(UIScale, tweenInfo, {
		Scale = 1.05
	}):Play()
end)

ImageButton.MouseLeave:Connect(function()
	TweenService:Create(UIScale, tweenInfo, {
		Scale = 1
	}):Play()
end)

Make sure the button has an anchor point of 0.5, 0.5 so it scales from the center and not from a corner.

Edit: Made code use UIScale instead of size values for cleaner code

5 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