Button not going to original state when the mouse is up and not touching

[John_GaBHo (John)]

I need a start button for my Windows 11 simulator.

When the mouse is up and touching it goes back to original state, but when not touching then it does nothing.

I tried to check for both the MouseButton1Up event and the MouseLeave, didn’t find any other solutions for that

local button = script.Parent
local originalSize = button.Size 
local originalPosition = button.Position
local smallerSize = UDim2.new(0.031, 0, 0.055, 0)
local targetPosition = UDim2.new(0.484, 0, 0.93, 0)

local tweenService = game:GetService("TweenService")

local function animateButton(action, targetSize, targetPosition)
	local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
	local tween = tweenService:Create(button, tweenInfo, {Size = targetSize, Position = targetPosition})
	tween:Play()
end

button.MouseButton1Down:Connect(function()
	animateButton("down", smallerSize, targetPosition)
end)

button.MouseButton1Up:Connect(function()
	animateButton("up", originalSize, originalPosition)
end)

button.MouseEnter:Connect(function()
	if not button.MouseButton1Down then
		animateButton("enter", originalSize, originalPosition)
	end
end)

button.MouseLeave:Connect(function()
	if not button.MouseButton1Down then
		animateButton("leave", smallerSize, targetPosition)
	end
end)

[JohhnyLegoKing]

A convenient way to handle a button GUI’s state is by using the GuiState property:

--!strict
local TweenService = game:GetService("TweenService")

local TWEEN_INFO = TweenInfo.new(0.2)

local button = script.Parent

local buttonIdle = TweenService:Create(button, TWEEN_INFO, {Position = button.Position, Size = button.Size})

local buttonHover = TweenService:Create(button, TWEEN_INFO, {Position = button.Position, Size = UDim2.fromOffset(400, 50)})

local buttonPress = TweenService:Create(button, TWEEN_INFO, {Position = UDim2.fromScale(0.484, 0.93), Size = UDim2.fromScale(0.031, 0.055)})

button:GetPropertyChangedSignal("GuiState"):Connect(function()
	if button.GuiState == Enum.GuiState.Idle then
		buttonIdle:Play()
	elseif button.GuiState == Enum.GuiState.Hover then
		buttonHover:Play()
	elseif button.GuiState == Enum.GuiState.Press then
		buttonPress:Play()
	end
end)

Enum.GuiState.Idle is the default state of GUIs, with no mouse interactions
Enum.GuiState.Hover is the GUI’s state when a mouse is hovering over it
Enum.GuiState.Press is the GUI’s state when a mouse clicks/presses it

buttonIdle is the Tween to be played when the GUI’s state is Enum.GuiState.Idle
buttonHover is the Tween to be played when the GUI’s state is Enum.GuiState.Hover
buttonPress is the Tween to be played when the GUI’s state is Enum.GuiState.Press

---

There’s also a fourth possible state called Enum.GuiState.NonInteractable, which a GUI enters if you set its Interactable property to false