Tweening UI Buttons

Hey Developers,

So basically I am working on a club game and one of the UI’s which is a setting theme has an “off” & “on”
settings. The “On” button already has a blue image-color background & off just has a grey background. What I want to happen is when you click off the blue does a smooth tween changing colors in the off button and a smooth tween changing colors grey on the on button.

Sorry if this doesn’t make sense I’m not sure how I can explain it.

This is the only clear example I have:

game:GetService("TweenService"):Create(ui,, {BackgroundColor3 =[[your color here]])}):Play()

didn’t test

You can actually tween almost any property that has a number (excludes number ranges iirc), you just have to use TweenService instead of any built-in method (like TweenSize, TweenPosition etc…). One of the best parts about TweenService over those built-in functions is that you’re able to tween multiple properties with a single tween instance which you can specify by yourself.

local tweenService = game:GetService('TweenService')
local instance = script.Parent -- object which you want to tween
local goalColour =,0.1,0.1) -- Goal colour
local properties = { -- Properties MUST be a table. It can also contain a single property, just ensure you're wrapping it in curly brackets to specify that it is indeed a table.
    BackgroundColor3 = goalColour
    TextColor3 = goalColour
local tweenInfo =

local tween = tweenService:Create(instance, tweenInfo, properties)
print('Tween finished!')

You can look up the article on TweenInfo here to view all of the parameters:

1 Like

What does that coordinate with like is that the name of the frame?

Yeah, that would be the instance which is going have its properties tweened.

the object you want to smooth tween changing colors