How to enlarge gui button on mouse hover

Help and Feedback Scripting Support
, ,
#1

What do I want to do?

I would to like to enlarge a gui button when I hover my mouse over and undo the size after my mouse stops hovering

I know I need to use MouseEnter event but how to enlarge? Tween or just multiple the size by like 0.3

2 Likes
#2

If you want it to be smooth then use tween, here’s an example:
LocalScript inside the button:

local ogSize = script.Parent.Size
local duration = 1

script.Parent.MouseEnter:Connect(function()
    script.Parent:TweenSize(ogSize + UDim2.new(0.1,0,0.1,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, duration)
end)

script.Parent.MouseLeave:Connect(function()
    script.Parent:TweenSize(ogSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, duration)
end)
4 Likes
#3

just tested it out it doesnt work properly i get an error and it becomes smaller

image
image953×59 10.6 KB

#4 
local Enumeration = Enum
local Game = game
local TweenService = Game:GetService("TweenService")
local Script = script
local GuiObject = Script.Parent

local Tween

local function OnMouseEnter()
	if Tween then Tween:Cancel() end
	Tween = TweenService:Create(GuiObject, TweenInfo.new(1, Enumeration.EasingStyle.Linear, Enumeration.EasingDirection.Out), {Size = UDim2.new()}) --Make the gui object's size bigger.
	Tween:Play()
end

local function OnMouseLeave()
	if Tween then Tween:Cancel() end
	Tween = TweenService:Create(GuiObject, TweenInfo.new(1, Enumeration.EasingStyle.Linear, Enumeration.EasingDirection.Out), {Size = UDim2.new()}) --Revert gui object's size back to normal.
	Tween:Play()
end

GuiObject.MouseEnter:Connect(OnMouseEnter)
GuiObject.MouseLeave:Connect(OnMouseLeave)

You’ll need to specify the sizes and/or other tween properties.

1 Like
#5

@Philipceo90 i edited that part of the script, try it now

#6

How would I make it slightly tilt aswell? Also, my textButton has text, and it just scales the text up instead of the button itself

#7

You could add rotation to tilt this, and could you elaborate on the “Also, my textButton has text, and it just scales the text up instead of the button itself”

local ogSize = script.Parent.Size
local duration = 1

script.Parent.MouseEnter:Connect(function()
    script.Parent:TweenSize(ogSize + UDim2.new(0.1,0,0.1,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, duration)
script.Parent.Rotation = 5 -- change this however you want 
end)

script.Parent.MouseLeave:Connect(function()
    script.Parent:TweenSize(ogSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, duration)
script.Parent.Rotation = 0
end)
2 Likes