Fading GUI Elements

Fading GUI Elements

Jun 14 2019, 4:48 PM PST


You want to create a GUI that when you hover over it, it fades out, then when you hover out of it, it fades back in with a random color.


Use the MouseEnter and MouseLeave events.

local button = script.Parent
	for i = 0, 1, .1 do
		button.BackgroundTransparency = i
	button.BackgroundColor3 = BrickColor.random().Color
	for i = 1, 0, -.1 do
		button.BackgroundTransparency = i


Since we’re using events we must put this code into a LocalScript which should be within a TextButton (which gives us these events unlike a Frame or TextLabel), and that TextButton should be in a ScreenGui (in order for it to be rendered), and then that should be inside of the StarterGui so once the game starts up, all players have this. Now you can feel free to change the properties of the TextButton as you wish.

Inside the script we first connect the MouseEnter event which fires when the player hovers over the GUI. We animate the button’s BackgroundTransparency so it fades out. Do note if you actually have Text in the TextButton set, if you want to fade out the Text as well, you need to add this line of code wherever you see BackgroundTransparency.

button.TextTransparency = i

You need this because a TextButton has two separate properties controlling the transparency of the background and text.

In the MouseLeave event where the player hovers off the GUI, we set the color of the background to a random color. We’ve used BrickColor before, but now we’re getting a random BrickColor and getting a Color3 from it (don’t worry this will be covered in depth later on). Then we just fade out the GUI.

  • gui
  • fx
  • script
  • coding
  • random