How can I assign different hover effects to a button?

I have a go-to setup when it comes to setting up buttons and I’m trying to expand on it a bit by being able to assign different hover effects to the button and wanted to know better approaches I could take to it since I don’t think my solution is that great.

Edit: Found a better approach basically took the basics from an effect module I had each button effect will be its own module or put into one big module and I can just assign a string to the button.

local buttonEffects = {}

local function SetupButton(button)
	button.MouseLeave:connect(function()
		if ButtonModule[button.Name] then
			local effectName = ButtonModule[button.Name].hoverEffect
			buttonEffects[effectName][effectName](button)
		end	
		
		currentButton = nil
	end)

	button.MouseEnter:Connect(function()
		currentButton = button

		if ButtonModule[button.Name] then
			local effectName = ButtonModule[button.Name].hoverEffect
			buttonEffects[effectName][effectName](button)
		end		
	end)
	
	button.MouseButton1Click:Connect(function()	
		if ButtonModule[button.Name] then
			ButtonModule[button.Name].pressed()
		end
	end)	
end

--Require all the button effect modules
for _,module in pairs(script.Buttons.ButtonEffects:GetChildren()) do
	if module:IsA("ModuleScript") then 
		buttonEffects[module.Name] = require(module)
	end
end
local buttons = {}

buttons.Continue = {
	pressed = function()
		warn("continue button pressed")
	end,
	
	hoverEffect = "BasicHover",
}

return buttons

old code below

--UI Module
local function SetupButton(button)
	button.MouseLeave:connect(function()
		if ButtonActionModule[button.Name] then
			ButtonActionModule[button.Name].hoverEffect(button)
		end	
		
		currentButton = nil
	end)

	button.MouseEnter:Connect(function()
		currentButton = button

		if ButtonActionModule[button.Name] then
			ButtonActionModule[button.Name].hoverEffect(button)
		end		
	end)
	
	button.MouseButton1Click:Connect(function()	
		if ButtonActionModule[button.Name] then
			ButtonActionModule[button.Name].pressed()
		end
	end)	
end
--Button Action Module
local buttons = {}

local function ButtonHighlight(button)
	if not button then return end

	local currentValue = button.BackgroundTransparency
	button.BackgroundTransparency = 1 - currentValue
end

buttons.Continue = {
	pressed = function()
		warn("continue button pressed")
	end,
	
	hoverEffect = function(button)
		ButtonHighlight(button)	
	end,
}

return buttons
1 Like