Hello Roblox Developer Forum members,
I have stumbled upon a game with an interesting button effect and i was wondering how to make one myself. I have no knowledge in scripting so this is kind of a request, but I would be willing to understand the code and learn off of that. Thank you in advance!
9 Likes
it just tweens the size and rotation, and has a cool mouse particle i assume is made with ui images and the text for the store uses the new ui gradient
4 Likes
Yeah what @Instance0new said. I think you should look into TweenService if you want to learn how to do things like this. Also, the ImageLabel particle effect is likely after a MouseButton1Down or MouseButton1Click and it finds a random offset of the mouse location within a certain range of pixels and tweens several ImageLabel particles to those random UDim2’s. If you want to become a better UI designer, learn how to animate your GUIs! 
2 Likes
Let me steer you in the right direction:
Firstly take a look at Tween Service
Then, understand the Player Mouse
Once you’re done, you should know a bit about each of them
What you are going to do is create tweeninfo and create a tween. And this tween will play once the mouse button is down. Then when the mouse button is up, create another tween.
The reason I didn’t give out an example of code is that I find that there is rarely and learning that comes from it, but I hope this steered you in the right direction.
2 Likes
Here is an simple thing:
local button = script.Parent
button.MouseEnter:Connet(function(button)
script.Parent:TweenSize(UDim2.new(0, 0, 0), "In", "Quad", 1)
end)
button.MouseLeave:Connet(function(button)
script.Parent:TweenSize(UDim2.new(0, 0, 0), "In", "Quad", 1)
end)
Change the 0, 0, 0 to the size you wan’t it to tween the size of the button. 
3 Likes
TweenService & Button Events.
local button = script.Parent -- where the button is located (for single buttons)
local originalSize = button.Size -- for tweening back to normal size
button.MouseEnter:Connect(function()
button:TweenSize(UDim2.new(1,0,1,0),"In","Quad",1) -- 1,0,1,0 probably won't be what you need, as that makes it full-screen, but just an example.
end)
button.MouseLeave:Connect(function()
button:TweenSize(originalSize,"In","Quad",1) -- it'll go back to normal size once the mouse leaves
end)
This is asssuming that the script is within the button, if you want to do multiple buttons you can always do: (with the LocalScript inside the ScreenGui)
for i,v in pairs(script.Parent:GetDescendants()) do
if v:IsA("TextButton") or v:IsA("ImageButton") then
v.MouseEnter:Connect(function()
-- Tweens Here
end)
v.MouseLeave:Connect(function()
-- Tweens Here
end)
end
end
This was typed quickly and on here not in Studio so sorry if there’s any mistakes.
4 Likes
This works for me, but I was wondering how to make that small smoke. The one that appears when you click, goes in to random directions, then disappears.
They use ImageLabels and position them to the mouse position.
Look up Mouse.Hit if you need to.
1 Like
Hi, I tried using this but doesn’t seem to work also is there any way I could make the GUI rotate?
almost a silly amount of tweening tbh