Web Design Part 1: Rounded Corners Hover Effect

Hey everyone! :wave:

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 :exclamation:

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 :newspaper:

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.


Setup :hammer_and_wrench:

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 :rofl:).

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 :scroll:

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 :scroll:

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 :speech_balloon:

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.

Next Tutorial(s)


30 Likes

This is honestly really great! I’ve been hopping between different GUIs and I can never find a good one. This will definitely contribute to me making a great GUI for my game! Thanks and keep it up!

1 Like

This is super cool and I hope you continue these tutorials. I am a UI Designer and I always love seeing new, innovative tutorials to help beginners or even experienced designers create enhance their UIs.

2 Likes