Help with fade backround color on gui button

Help and Feedback Scripting Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    When mouse enters I want my button to turn a different color but more like a fade in. When mouse leaves it fades back to the original color.

  2. What is the issue? Include screenshots / videos if possible!
    I can’t figure it out.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I looked at some older posts and tried using i = and stuff like that and it didn’t work for me. I saw people using tweenservice but I didn’t understand it.

Thanks for any help.

2 Likes
#2 
local button = script.Parent

button.MouseEnter:Connect(function()
	button.BackgroundColor3 = Color3.new(0, 0, 0)
end)

button.MouseLeave:Connect(function()
	button.BackgroundColor3 = Color3.new(1, 1, 1)
end)

Local script, place inside the button itself. Change the colors around if necessary.

#3

You’ll need to use tween service. Here’s how to do so. Put the script into a local script and parent the local script to the desired button.

local Button = script.Parent
local TweenService = game:GetService("TweenService")
local OriginalColor = Button.BackgroundColor3
local HoverGoals = {
	BackgroundColor3 = Color3.fromRGB(0, 59, 255) -- change the color to what u want it to change to
}
local HoverLeaveGoals = {
	BackgroundColor3 = OriginalColor
}
local Info = TweenInfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false)
Button.MouseEnter:Connect(function()
	local ChangeColorTween = TweenService:Create(Button, Info, HoverGoals)
	ChangeColorTween:Play()
end)
Button.MouseLeave:Connect(function()
	local ChangeColorBackTween = TweenService:Create(Button, Info, HoverLeaveGoals)
	ChangeColorBackTween:Play()
end)

If you want to see how I set it up then u can look at this file feel free to use the scripts. If you have any qeustions then say below.
Tjuieewrewr.rbxl (35.0 KB)

1 Like
#4

this one is a local script, when your mouse enters it tweens to the desired color and when the mouse leaves it fades back to the original color (Background Color) vvv

local button = script.Parent
local tween = game:GetService("TweenService")

local default_color = Color3.fromRGB(0, 0, 0)
local desired_color = Color3.fromRGB(255, 255, 255)
local fade_speed = .5

function enter()
tween:Create(button,TweenInfo.new(fade_speed),{BackgroundColor3 = desired_color}):Play()
end

function leave()
tween:Create(button,TweenInfo.new(fade_speed),{BackgroundColor3 = default_color}):Play()
end

button.MouseEnter:Connect(enter)
button.MouseLeave:Connect(leave)

This one changes both Background color and outline vvv

local button = script.Parent
local tween = game:GetService("TweenService")

local default_color = Color3.fromRGB(0, 0, 0)
local desired_color = Color3.fromRGB(255, 255, 255)
local fade_speed = .5

function enter()
tween:Create(button,TweenInfo.new(fade_speed),{BackgroundColor3 = desired_color,BorderColor3 = desired_color}):Play()
end

function leave()
tween:Create(button,TweenInfo.new(fade_speed),{BackgroundColor3 = default_color,BorderColor3 = default_color}):Play()
end

button.MouseEnter:Connect(enter)
button.MouseLeave:Connect(leave)
1 Like
#5

As @kinglol123468 said, you can use tween service to fade in and out once the mouse hovers in/out.
But ill give you a detailed explanation of how it works.

local ButtonInstace = script.Parent -- Gets the parent of the script
-- which means this script should be placed inside the button


local TweenService = game:GetService("TweenService")
-- We get the TweenService for the fade animation

function Fade(Button,TargetColor) -- A function that fades a button
TweenService:Create( -- Returns a TweenBase, you can look at roblox docs about it
Button, -- The Instance TweenService will use
TweenInfo.new( -- This sets the information of the desired tweening
0.5, -- The time it will take to complete
Enum.EasingStyle.Quad, -- The tween bezier curve(or just the acceleration style)
Enum.EasingDirection.InOut, -- This just says if the tween will only speed up (In), if it will only slow down(Out) or if it will speed up and slow down(InOut)
),
{BackgroundColor3 = TargetColor}
-- This table sets the part properties we want to change, since we only need to change the background color, we can use backgroundcolor3
):Play() -- We play the TweenBase here
end

-- MouseEnter is a event, a event fires the function that is connected with it
ButtonInstace.MouseEnter:Connect(function()
Fade(ButtonInstace,Color3.new(1,0,0)) -- We input both the button, and the target color
end)
ButtonInstace.MouseLeave:Connect(function()
Fade(ButtonInstace,Color3.new(0,1,0)) 
end)

I hope this can help you with something

1 Like