The Microsoft GUI Mouse Near Button Effect

Resources Community Resources
#1

DISCLAIMER

Ok so I made this with some help aka I saw some devforum posts for formulas
getting the center
size increase
angle calculation

now please dont think that “HEY THIS GUY IS BAD HE USED OTHER PEOPLES POST AND TOOK CREDIT FOR HIMSELF!” now NON of that is true ok? so I did used there formula but I also modified it drastically ok so please don’t do misunderstanding ok and this is also why I added the links to those topic ok? thank you

So yesterday I made this post GUI Ripple Effect talking about GUI Ripple Effect and it had a blast for me. Like 12 likes that more then my net worth.
So to complete the SET I made

This 
local HoverModule = {}
local function GetCorner(sz, pos, anch)
 pos = typeof(pos) == 'UDim2' and Vector2.new(pos.X, pos.Y) or pos
 anch = anch or Vector2.new(0,0)
 return pos+(sz*anch)
end
local db = false

function HoverModule.AddEffect(Mouse,Gradient,Frame)
 local Camera = game.Workspace.CurrentCamera
 local ASX,ASY = Frame.AbsoluteSize.X,Frame.AbsoluteSize.Y
 local Corner = GetCorner(Frame.AbsoluteSize, Frame.AbsolutePosition, Frame.AnchorPoint)
 local Center = Corner+(Frame.AbsoluteSize/2)
 local MousePos,CenterPos = Vector2.new(Mouse.X,Mouse.Y), Center
 local Pos = MousePos - CenterPos
 local x,y = Pos.X, Pos.Y
 local angle = math.deg(math.atan2(x, -y))
 angle = angle < 0 and 360 + angle or angle
 local offset = 90
 local Distance = Pos.Magnitude
 Gradient.Rotation = angle + offset
 local KeyPos = 0.25
 local KP1C = 1

 local MIN,MAX = 0,0.5
 local InitialFormula = math.clamp(MIN + (MAX - MIN)*(Distance/(math.max(ASX,ASY)*2)), MIN, MAX)
 local FinishedFormula = MAX-InitialFormula
 KeyPos = FinishedFormula
 if FinishedFormula ~= 0 then
   KP1C = 1
 else
   KP1C = 0
 end
 local Color = ColorSequence.new({
  ColorSequenceKeypoint.new(0, Color3.new(KP1C,KP1C,KP1C)),
  ColorSequenceKeypoint.new(KeyPos, Color3.new(0, 0, 0)),
  ColorSequenceKeypoint.new(1, Color3.new(0, 0, 0))
 })

 Gradient.Color = Color
end
return HoverModule

“This” is the microsoft effect that when your cursor is near a button and its border kind of glow ya know so yea I made that. And yes idk what that effect is called and I certainly don’t want to google it (ye IK I am lazy). I hope you like both of my modules but this module my friend is a bit tricky so here is a step by step guide.

Steps

1: Make a module script and paste “This” in it!
2: Make a local script in the GUI of your choice and add a UIStroke in it
3: In the UIStroke add a UIGradient
4: In the local script paste this code

game:GetService("RunService").RenderStepped:Connect(function()
 local Mouse = game.Players.LocalPlayer:GetMouse()
 local HoverEffect = require(game.Workspace.HoverEffect)
 local UIGradient = -- path to gradient
 local Frame = -- path to frame
 HoverEffect.AddEffect(Mouse,UIGradient,Frame)
end)

Be sure to see the steps or it wont work.

  • This is OP VERY useful
  • Useful
  • Useful for others (Because I don’t want it / Already know how to make it)
  • This sucks not useful at all

0 voters

20 Likes
GUI Ripple Effect
#2

would be useful to have a picture or something,not everyone can try the code

3 Likes
#3

I can’t wait until I need to use it!

#4

yes i know and i shouldve added it but its not that complex to set it up unlike my other one

1 Like
#5

Mouse approach/highlight effect?

image
image

#6

yes that thanks you for telling me its name cause i suck at naming things

2 Likes
#7

Hmmm. It’s not working. I put the module script inside of workspace (like in the local script) and I put the local script in the frame/button. Am I doing something wrong, because I tested it out with the UI gradient being all black?

#8

Thank you for sharing this resource.

#9

the uistroke color should be white so that you can see the uigradient

1 Like
#10

FIXED MODULE SCRIPT

To use it follow these steps

  1. Make a module script.
  2. Make a local script inside your frame.
  3. Inside the frame add a UIStroke with white color and in the UIStroke add a UIGradient
  4. Paste this script in Local Script 2 use it.
game:GetService("RunService").RenderStepped:Connect(function()
 local Mouse = game.Players.LocalPlayer:GetMouse()
 local HoverEffect = require(game.Workspace.HoverEffect)
 local UIGradient = -- path to gradient
 local Frame = -- path to frame
 local DC = -- your back color
 local HC = -- your hover color
 HoverEffect.AddEffect(Mouse,UIGradient,Frame)
end)

local HoverModule = {}

local db = false

function HoverModule.AddEffect(Mouse,Gradient,Frame,HoverColor,DefaultColor)
 local Camera = game.Workspace.CurrentCamera
 local ASX,ASY = Frame.AbsoluteSize.X,Frame.AbsoluteSize.Y
 local FPX,FPY = Frame.Position.X.Scale,Frame.Position.Y.Scale
 local Center = Frame.AbsolutePosition+(Frame.AbsoluteSize/2)
 
 local MousePos,CenterPos = Vector2.new(Mouse.X,Mouse.Y), Center
 local Pos = MousePos - CenterPos
 local x,y = Pos.X, Pos.Y
 local angle = math.deg(math.atan2(x, -y))
 angle = angle < 0 and 360 + angle or angle
 local offset = 90
 local Distance = Pos.Magnitude
 Gradient.Rotation = angle + offset
 local KeyPos = 0.25
 local KP1C = 1

 local MIN,MAX = 0,0.5
 local InitialFormula = math.clamp(MIN + (MAX - MIN)*(Distance/(math.max(ASX,ASY)*1.5)), MIN, MAX)
 local FinishedFormula = MAX-InitialFormula
 KeyPos = FinishedFormula
 if FinishedFormula ~= 0 then
   KP1C = HoverColor
 else
   KP1C = DefaultColor
 end
 local Color = ColorSequence.new({
  ColorSequenceKeypoint.new(0, KP1C),
  ColorSequenceKeypoint.new(KeyPos, DefaultColor),
  ColorSequenceKeypoint.new(1, DefaultColor)
 })

 Gradient.Color = Color
end
return HoverModule
4 Likes
#11

I see, now let me ask you a question; how do you like your module?

#12

wait what do you mean?

2 Likes
#13

cause i made my module why wouldnt you like what you made lol

1 Like