Button Gets Bigger when hovering over it

Help and Feedback Scripting Support
1

You mostly see this on console games. Its its EA Sports Madden series. You can also find this in roblox games. The feature with Ui’s that make it so when you hover over it maybe the bordercolor gets bigger or the whole ui gets bigger is a type of feel i’m going for. The problem is I’ve never done this before and I kind of need guidence doing it.

3 Likes
2

Do you mean bordersizepixel?
h

1 Like
3

Connect a function to MouseEnter that changes whatever property of the button that you want it to modify. Connect another function to MouseLeave that resets this change.

1 Like
4

Use the MouseEnter and MouseLeave events.
This rotates the button when hovering over it:

image.MouseEnter:Connect(function()
	local TweenService = game:GetService("TweenService")
	local tweenInfo = TweenInfo.new(
		1, -- The time the tween takes to complete
		Enum.EasingStyle.Bounce,
		Enum.EasingDirection.Out,
		0,
		false,
		0 
	)
	local Tween = TweenService:Create(image, tweenInfo, {Rotation = 60}) 
	Tween:Play()
end)

image.MouseLeave:Connect(function()
	local TweenService = game:GetService("TweenService")
	local tweenInfo = TweenInfo.new(
		0.5, -- The time the tween takes to complete
		Enum.EasingStyle.Cubic,
		Enum.EasingDirection.Out,
		0,
		false,
		0 
	)
	local Tween = TweenService:Create(image, tweenInfo, {Rotation = 0})
	Tween:Play()
end)
3 Likes
5

Yeah I ment bordersizepixel thats my bad

1 Like
6

So the thing is I’m scaling the borderpixel size instead image so do I just change image too?

1 Like
7

you could just do

button.MouseEnter:Connect(function()
   --do whatever to make button bigger
end)
button.MouseLeave:Connect(function()
    --do whatever to make button small
end)
1 Like
8

Can I just try putting another button behind that button and make it so that the button behind it gets bigger?

9

why make things complicated as you can just do button.Size or maybe button.BorderSizePixel?

10

For that, a few functions are needed.

First of all, you need to learn the functions on mouse enter and exit.

Than, you can just do animations with the size.

11

if you really wanna do something like the way you say you could just do

button.MouseEnter:Connect(function()
   YourButtonInTheBack.Size= make it bigger
end)
button.MouseLeave:Connect(function()
    YourButtonInTheBack.Size= make it smaller
end)
1 Like
12

The devforum didn’t send me a notification for your reply? weird…

Anyways,
I’m not sure you can tween BorderSizePixel. It only allows 1 number. :(. BUT I believe you can use TweenService and ImageButton/TextButton.MouseEnter/MouseLeave to come up with something.