Can anyone help me make this button get bigger when they put there mouse on it?

So basically I have been trying to make it so this button gets bigger when the mouse enters it.
Only problem is, BUGS JUST KEEP HAPPENING. I mean like what does “Unable to cast string to token” mean? I dont have anything called “token”

So I have decided to ask for help(should have done this ages ago)

So um how would I make it bigger? IF you seen anything weird in my code its prob cause I was following a tutorial and I have no idea what Im doing

local tweenMod = require(script:FindFirstChild('TweenMod'))






local tweenS = game:GetService('TweenService')



-- scale buttons stuff

local function callback(didcomplete)
	if didcomplete then
		print('Tweened!')
	else
		print('Failed to tween')
	end
end





local function sizeButton(button,size)
	button:TweenSize(size,"out","Sine",tweenMod.tween.speed,true)
end

-- tween buttons
local buttons = game:GetService('CollectionService'):GetTagged('MenuButton')

for _, button in pairs(buttons) do
	if button:IsA('TextButton') then
		button.MouseEnter:Connect(function()
			print(button.Name)
			-- the mouse has entered the button
			
			-- the size
			local size = UDim2.new(
				button.Size.X.Scale/2,
				0,
				button.Size.Y.Scale/2,
				0
			)
			
			-- scale it
			sizeButton(button,size)
		end)
	end
end

And for your info I have looked all over the place and I have found nothing that works so. Yeah

1 Like

This should be what you need.

local tweenService = game:GetService("TweenService")

local btn = nil --// Change this to the button

local buttonSizeX = btn.Size.X.Scale
local buttonSizeY = btn.Size.Y.Scale

btn.MouseEnter:Connect(function()
	local newSizeX = (buttonSizeX + 0.05) --// 0.05 can be adjusted to what you think looks better
	local newSizeY = (buttonSizeY + 0.05) --// 0.05 can be adjusted to what you think looks better

	local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], 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.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
	tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX, 0, buttonSizeY, 0)}):Play()
end)
1 Like

Um so I did this and all the buttons just shrink. Till they are to small to shrink anymore.
How do I fix this?
I might have a good idea on how

Did you delete the existing code in your for loop? I’m assuming you put it in your for loop

That code could be interfering with it.


I’m going to be honest, I ripped the code out of my game lol. It works just fine there.

1 Like

This is my code right now

local tweenS = game:GetService('TweenService')



-- scale buttons stuff





-- tween buttons
local buttons = game:GetService('CollectionService'):GetTagged('MenuButton')

local tweenService = game:GetService('TweenService')


for _, btn in pairs(buttons) do
	local buttonSizeX = btn.Size.X.Scale
	local buttonSizeY = btn.Size.Y.Scale

	btn.MouseEnter:Connect(function()
		local newSizeX = (buttonSizeX + 0.05) --// 0.05 can be adjusted to what you think looks better
		local newSizeY = (buttonSizeY + 0.05) --// 0.05 can be adjusted to what you think looks better

		local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], 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.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
		tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX, 0, buttonSizeY, 0)}):Play()
	end)
end

I got no idea whats wrong

Also the reason I loop through items is cause I need to do this with multiple buttons

I’m not too sure either saying it works in my game completely fine. Uses the exact same code.


Can you try changing these lines to be - 0.05 instead of + 0.05? Kind of a stupid idea, and it’s a safe bet on all of my life savings it won’t help, but doesn’t mean you can’t try.

If it doesn’t work, change it back to + 0.05 and show me a video if you can.

Oh wait. Am I suppose to set anything in the buttons properties?
That’s my guess.

Maybe like anchorPoint or something

The anchor point won’t change much other than the corner(s) that readjust in size.

Like with the anchor point set to 0, 0, it will change size from the bottom right corner, but if it’s 0.5, 0.5, it will change size from all four corners.


I really recommend using 0.5, 0.5 for the anchor point since it looks nicest. I only recommend using a different anchor point if it is close to a corner or edge of a UI element.

Well other then this shrinking problem i guess this works lol

Still unsure why it’s shrinking. I mean, it works literally just fine for me :sob: :sob:

This is so weird! I have your exact code!! ITS STILL SHRINKIN!!

whyyyyy

Can you by chance show me the properties of the buttons? I don’t know why you would ever want to, but using negative sizes, like -0.2, 0, -0.1, 0 would make it shrink. But again, I don’t know why you ever would :sob:

There we go. I see. It’s changing the scale parts of the size property of the buttons, not the offset. And you are using offset. That is probably causing the issue. A good tip: never use offset when making UI. It’s not a good idea.

Here is a nice plugin to help convert it to scale: AutoScale Lite - Roblox

Um . . . Incase I was really dumb. . . Which I might just be . . .
What is this Offset property? I dont see it any where and I dont know how to fix it.
Srry if this is bothering . . .

Size is constructed from a UDim2 It uses two UDim values. A UDim value contains two numbers: a scale, and an offset. The scale is a percentage from 0 to 1 of the screen’s size, whereas offset is the size in pixels. So if you have a computor monitor as big as I do (I have a 4K monitor), and you set the offset to be 256 pixels, that will look really good for your monitor, but it will look completely garbage on smaller screens. The difference between a 1080 monitor and 4k monitor is huge btw.

It’s always best to use scale, because no matter how big or small the user’s screen is, it will look the same.


This frame’s size is 0, 200, 0, 200. So 0% of the screen on the X, 200 pixels on the X, 0% on the Y, and 200 pixels on the Y. This is on 1080p emulation

This is the exact same frame with the exact same size but without emulation (so 4k)

And this is the exact same frame with the exact same properties on an iPhone 14 Pro
image


When I convert it to scale, its size is now 0.289, 0, 0.576, 0

These are the same screen sizes in the same order as before, but with the new size (1080 emulated, 4k, and iPhone 14 Pro)



image


It fits nicely all the way down to an iPhone 4S


(Though its size is a bit wonky. Taller on the Y, but that’s because there is no size constraint to keep it square instead of being rectangular)


A UDim2 can be setup like this (and this is how you see it in properties):
0.5 -- 50% of the screen (X), 0 -- zero pixels (X), 0.5 -- 50% of the screen (Y), 0 -- zero pixels (Y)
Or how it is seen 100% like the properties (with the curly brackets)
{0.5, 0},{0.5,0} — The exact same as directly above

Um so what would you recommend I set it to? Cause I got no idea what I should set it to

Set it to 0.04, 0, 0.04, 0, then change the SizeConstraint property to RelativeXX. This will restrict the size on the Y to be the exact same as the X as long as the Y scale is the same as the X scale. Vice versa for RelativeYY


Changing those two properties will make it almost the exact same size as before. It will be just barely larger.

Still shrinking . . . OMG THIS IS SO ANNOYING
I even made a new button it is still shrinking.
Maybe Ill ask around the dev forum

Did you change this with ALL buttons? Because when I test it with two, it works perfectly fine with the one set to scale. But when I use one set with offset, it shrinks just like you say.