Web Design Part 5: How to Make a Fade-In Hover Effect (Color Tween)

In Case You Missed the Previous Tutorials:

Hello developers,

Welcome back to the Web Design series where you learn to recreate web-related aspects in Roblox. Today, we will be creating something very simple: a fade-in hover effect. A majority of websites use some form of a fade-in hover effect (either with color, like in this tutorial; size; position; and etc.). Not only is it pleasant, but the effect is easy to create! Basically, when a player hovers over a button, it’s background color will slowly transition to a new one (which we will set). Then, when the mouse leaves the button, the background color will return to normal while transitioning slowly:

HoverGIF
Notice, the background does not turn blue INSTANTLY. It transitions within 0.5 seconds. Also, this works perfectly; there are no errors (as far as I know) with the result.

To create this effect, we will utilize the TweenService, which is SUPER useful especially when it comes to GUI animations.


Disclaimers / Knowledge Required :exclamation:

You will need a good understanding of the TweenService.

Here is a video by @Alvin_Blox that wonderfully explains TweenService:


Setup :hammer_and_wrench:

  1. Insert a TextButton and set its properties to anything you desire. But, if you want to replicate mine, feel free:
    • AnchorPoint: 0.5, 0.5
    • BorderMode: Inset
    • BorderColor3: 50, 150, 250
    • BorderSizePixel: 5
    • Position: 0.5, 0, 0.5, 0
    • Size: 0.875, 0, 0.25, 0
    • Name: HoverButon
    • TextColor3: 50, 150, 250 (keep it the same as BorderColor3)
    • TextSize: 75
    • Font: SourceSansBold
  2. Set the AutoButtonColor property of the TextButton to false (no check mark in the box).
  3. Insert a LocalScript inside of the TextButton.
    • Name: Hover

Scripting :scroll:

Double click on your LocalScript (aka “Hover”). Begin by setting the variable for the parent:

local button = script.Parent

Then, continue by defining the TweenService variables:

local ts = game:GetService("TweenService")
local ti = TweenInfo.new(0.5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out) --you can set that to anything you want
local tIn = {BackgroundColor3 = Color3.fromRGB(50, 150, 250), TextColor3 = Color3.fromRGB(255, 255, 255)} --colors are up to you
local tOut = {BackgroundColor3 = Color3.fromRGB(255, 255, 255), TextColor3 = Color3.fromRGB(50, 150, 250)} --colors are up to you
local createIn = ts:Create(button, ti, tIn) --when mouse ENTERS button
local createOut = ts:Create(button, ti, tOut) --when mouse LEAVES button

Simply, all that is left to do is hook these up with button.MouseHover and button.MouseLeave events:

button.MouseEnter:Connect(function()
	
	createIn:Play()
	
end)

button.MouseLeave:Connect(function()
	
	createOut:Play()
	
end)

And, it’s as simple as that! Test it and it will work just like the GIF above.


Beauty of the TweenService :star_struck:

going just a little off-topic

What’s so fascinating about the TweenService is that it also works with the 3D in-game world. But, I usually use it for UI, as I find that it’s extremely useful for UI animations (such as this one we just created).

For example, if we have a script that fades in the background of the TextButton via BackgroundTransparency (not BackgroundColor3), we can do it one of two ways: TweenService or For Loops. The latter is extremely inefficient because it can cause flickering and other awkward things to happen:
HoverForLoop_GIF

However, with the use of TweenService, the Background fades in and out appropriately (AS SOON AS the mouse leaves, the “In” tween is interrupted and the “Out” tween is played):
HoverTS_GIF

Another advantage of using the TweenService over For Loops is that you can tween COLOR! Sure, this is possible if you iterate through the R, G, and B values of color using a loop, but that is much more difficult to create and does not always output the desired result.

Simply put, the TweenService is:

  • Easy to work with
  • Useful to many aspects of development
  • Applicable to many properties (transparency, color, etc.)
  • guaranteed to yield the best results

This hover effect in this tutorial is just ONE use of TweenService; there are many more things you can achieve with this. So, use this service when you need to!


Feedback :speech_balloon:

Did you learn something new? (Is this the first time that you have learned to recreate a fade-in hover effect in Roblox?)
No = you already knew how to recreate this effect
Yes = I never knew how to create this; I JUST learned now

  • Yes
  • No

0 voters

How useful did you find this tutorial?
0 = I don’t feel like I am going to use this EVER
10 = I may incorporate this in a MAJORITY of my UIs

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

Please feel free to reply with any comments or concerns.

Thank you for your time and feedback,
and have a good time!

7 Likes

This was a great tutorial but shouldn’t this be labeled as UI design since you’re making this for Roblox and not for a browser like chrome?

3 Likes

Great question; the name “Web Design” is supposed to refer to the design of UI recreated in Roblox, not actually the web. Now that I think about it, the name does have dual meanings…

But this is the meaning I intend to convey.

Well could you make it open-source, because some peapole can’t understand it, but It Is an good tutorial.

1 Like

It is already open source. In fact, all of the code is written, but here is the full script (not split up in parts):

local button = script.Parent
local ts = game:GetService("TweenService")
local ti = TweenInfo.new(0.5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out) --you can set that to anything you want
local tIn = {BackgroundColor3 = Color3.fromRGB(50, 150, 250), TextColor3 = Color3.fromRGB(255, 255, 255)} --colors are up to you
local tOut = {BackgroundColor3 = Color3.fromRGB(255, 255, 255), TextColor3 = Color3.fromRGB(50, 150, 250)} --colors are up to you
local createIn = ts:Create(button, ti, tIn) --when mouse ENTERS button
local createOut = ts:Create(button, ti, tOut) --when mouse LEAVES button

button.MouseEnter:Connect(function()
	
	createIn:Play()
	
end)

button.MouseLeave:Connect(function()
	
	createOut:Play()
	
end)

Also, you can copy it if you would like, I do not mind (it is the purpose of the tutorial after all). There are comments that show what the lines of code do, but ask me if you do not get something.

I am glad you liked the tutorial :smile:.

Well I have used your tutorial and made a menu! It looks good and it works, soo thanks @TheCarbyneUniverse.

1 Like

And maybe if you are going to make an art 6, make it an how do use ViewPort frames to show you character.

2 Likes

That is a great idea DaffyDavinko! It will not be part of this series as it’s not related to websites. But, I will definitely make a tutorial on that.