How to add a float effect to GUI?

Although they provided a solution, a better way would be to use TweenService so you could change both the size and color at the same time.

TweenService:Create(Frame, TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out), {Size = UDim2.new(1, 0, 1, 0), BackgroundColor = Color3.fromRGB(0, 0, 0)}):Play()

Maybe try this:

local buttton = --Define your Button

button.MouseEnter:Connect(function() --This event fires once the player's mouse hovers over.
    --Code here
end)

button.MouseLeave:Connect(function() -- This event fires once the player's mouse leaves.
    --Code here
end)

Hope this helps as an example!

I think this is what you need by reading what you said:

So, to make something do something do something when your mouse hovers over something, you use MouseEnter. MouseEnter is just saying in other words, your mouse is hovering over something.

So, this is an example of what I mean:

local button = script.Parent

button.MouseEnter:Connect(function()
   button:TweenSize(UDim2.new(0, 289, 0, 106), "In", "Sine", .5)
end)

and to make it go back to it's normal size again when your done hovering over the gui, this is what you type:

local button = script.Parent

button.MouseEnter:Connect(function()
   button:TweenSize(UDim2.new(0, 289, 0, 106), "In", "Sine", .5)
end)

button.MouseLeave:Connect(function()
   button:TweenSize(UDim2.new(0, 200, 0, 50), "In", "Sine", .5)
end)

I hope this helped :D