Note: the title has been changed to remove as this will no longer be part of the Web Design series, which was named incorrectly in the first place. It’s a change long overdue, but hopefully that doesn’t cause too much inconvenience.
Hey everyone! 
I am starting a new series that teaches how to replicate (or come close to) some effects, layouts, and styles possible by CSS. This tutorial series is mainly for users who seek to create website-like UIs on Roblox, however, some techniques learned in this series may be useful for others as well. So stick around even if you have no intention of developing web UIs!
Disclaimers / Knowledge Required 
1
Please proceed reading this ONLY if you are able to understand Image Slicing. If you wish to research more on this topic before continuing.
–
Resources:
DevHub;
this Forum post
2
Additionally, knowledge of using the TweenService.
–
Rsources:
DevHub;
this video
Overview 
This tutorial will show you how to create a simple, yet stylish, hover effect on Roblox! As I stated above, this technique utilizes Slicing (as in Images) and the TweenService, so please proceed with an understanding of them.
Here is what we’ll be learning:
Notice how when I hover over the “Hello world!” button, the already-rounded corners are rounded even more.
This tutorial was originally written before UICorners blessed us all, so I decided to split the tutorial into two methods:
UICorner Method (recommended)
A UICorner object is a modifier-type instance that is parented to the UI element you want to modify. It has the property called CornerRadius, which controls how large the rounded corners are in pixels. Unlike the 9-Slice method, CornerRadius accepts a UDim, so we can input either scale or offset (or both). I’d recommend using offset if you want your corners to look consistent throughout your game (regardless of UI element size).
The concept and the script are actually much simpler than the other method, so one block should be enough:
-- services
local TweenService = game:GetService('TweenService')
-- instances
local button = script.Parent
local uiCorner = button:FindFirstChildOfClass('UICorner')
-- vars
local ti = TweenInfo.new(0.5)
local activateTween = TweenService:Create(uiCorner, ti, { CornerRadius = UDim.new(0, 25) })
local originTween = TweenService:Create(uiCorner, ti, { CornerRadius = UDim.new(0, 10) })
button.MouseEnter:Connect(function()
activateTween:Play()
end)
button.MouseLeave:Connect(function()
originTween:Play()
end)
Literally that’s it, we’re done! I guess this method alone wouldn’t deserve a tutorial, but it fit nicely and it’s good to have a more up-to-date method.
9-Slice Method
Setup 
What you’ll need for this is an image of a white circle with an Aspect Ratio of 1:1 with a transparent background.
You are free to use this (it is literally just a circle
).
After uploading this to Studio, immediately set:
- BackgroundTransparency to 1;
- Image to the circle provided above (of course);
- ScaleType to “Slice”;
- SliceCenter to half of the circle’s width as all parameters (for example, 1000 px circle’s SC would be (500, 500, 500, 500);
- SliceScale to anything above 0;
All other properties can be set to what you desire. Now, simply add a local script inside of the button.
Scripting 
Start by defining basic variables.
local button = script.Parent
local ts = game:GetService("TweenService")
local endScale = 0.2 --when hovered over
local startScale = 0.1 --when mouse leaves
Next, we’ll define the TweenInfo of when the mouse is “in” and “out” of the button. You can set the arguments to anything you want.
local inInfo = TweenInfo.new(0.17, Enum.EasingStyle.Linear, Enum.EasingDirection.In)
local outInfo = TweenInfo.new(0.35, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
Third, we need to construct a table of properties that we would like to change. To configure the roundness of the button, we will only need to manipulate the SliceScale property (the two values we defined are for this), but you can also change other properties as well.
local inProperties = {SliceScale = endScale}
local outProperties = {SliceScale = startScale}
Ignoring the awkward syntax colors above, we will now Create the tweens and hook them up with Mouse Events.
local inCreate = ts:Create(button, inInfo, inProperties)
local outCreate = ts:Create(button, outInfo, outProperties)
button.MouseEnter:Connect(function()
inCreate:Play()
end)
button.MouseLeave:Connect(function()
outCreate:Play()
end)
And we are done! Test it out and it is sure to work!
Full Script
local button = script.Parent
local ts = game:GetService("TweenService")
local endScale = 0.2 --when hovered over
local startScale = 0.1 --when mouse leaves
local inInfo = TweenInfo.new(0.17, Enum.EasingStyle.Linear, Enum.EasingDirection.In)
local outInfo = TweenInfo.new(0.35, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
local inProperties = {SliceScale = endScale}
local outProperties = {SliceScale = startScale}
local inCreate = ts:Create(button, inInfo, inProperties)
local outCreate = ts:Create(button, outInfo, outProperties)
button.MouseEnter:Connect(function()
inCreate:Play()
end)
button.MouseLeave:Connect(function()
outCreate:Play()
end)
Feedback 
So, what do you guys think? How helpful was this tutorial to you (did you learn something new)? Would you like this series to continue?
Usefulness
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
0 voters
Should This Series Continue?
- Yes, I’m looking forward for new tutorials!
- No, I do not think this has any potential / utility
0 voters
Thank you for your feedback and for reading.
The next tutorials are linked right below, feel free to check them out.