In Case You Missed the Previous Tutorials:
- Web Design Part 4: Custom Text Truncating System With Ellipsis (Different From the Normal Text Truncate)
- Web Design Part 3: Fully Functional Horizontal Slider (Useful for Settings)
- Web Design Part 2: Adding Useful Features to ScrollingFrames
- Rounded Corners Hover Effect [Remade]
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:
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 
You will need a good understanding of the TweenService.
Here is a video by @Alvin_Blox that wonderfully explains TweenService:
Setup 
- 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
- Set the AutoButtonColor property of the TextButton to false (no check mark in the box).
- Insert a LocalScript inside of the TextButton.
- Name: Hover
Scripting 
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 
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:
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):
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 
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!
Edit: I accidently just wiped all votes for the Yes/No poll…
.