Hover Over Effect

This will help you learn how to add Hover Over Effects to gui objects

by eFL0125

Author Avatar

This will help you learn how to add a basic Hover Over Effects to gui objects

Lets start by adding a ScreenGui into StarterGui, i will rename it to "Tutorial" for the sake of this tutorial, after that add a TextLabel, TextButton and a Frame inside the ScreenGui. It should look something like this

image|200x200

Now insert a localScript inside the ScreenGui

The way that we will be checking to see if the mouse is hovering over a gui object is

GuiObject.MouseEnter

The way that we will be checking to see if the mouse is not hovering anymore over a gui object is

GuiObject.MouseLeave

Example #1: Hover Over Effect for a TextLabel (TextColor3)

Inside the local script add this

local TextLabel = script.Parent.TextLabel 
--change this to the path for your TextLabel

TextLabel.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the TextLabel
	TextLabel.TextColor3 = Color3.new(1, 0.666667, 0.498039) --here we change the TextLabels TextColor3 to #ffaa7f
end)

TextLabel.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the TextLabel
	TextLabel.TextColor3 = Color3.new(1, 1, 1) --here we change the TextLabels TextColor3 to white 
end)

Example #2: Hover Over Effect for a TextButton (TextColor3 and BackgroundColor3)

local TextButton = script.Parent.TextButton --change this to the path for your TextButton

TextButton.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the TextButton
	TextButton.TextColor3 = Color3.new(1, 0.666667, 0.498039) --here we change the TextButtons TextColor3 to #ffaa7f
	TextButton.BackgroundColor3 = Color3.new(1, 0, 0) --here we change the TextButtons BackgroundColor3 to red
end)

TextButton.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the TextButton
	TextButton.TextColor3 = Color3.new(0, 0, 0) --here we change the TextButton TextColor3 to black 
	TextButton.BackgroundColor3 = Color3.new(1, 1, 1) --here we change the TextButtons BackgroundColor3 to white
end)

Example #3: Hover Over Effect for a Frame (With Rotation)

local Frame = script.Parent.Frame --change this to the path for your Frame

Frame.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the Frame
	Frame.Rotation = -12 -- sets the frames rotation to -12
end)

Frame.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the Frame
	Frame.Rotation = 0 -- sets the frames rotation to 0
end)

View in-game to comment, award, and more!