Button hover & click animation


#1

Hey there! I’ve recently seen developers who managed to make an animation that happens when you hover over it, like some in-app buttons.

I’ve got an image to explain what I mean. :wink:

I’m not asking for scripts btw, but maybe there’s like a trick I didn’t know about yet. :wink:

Thanks in advance,
Jonas!


#2

From what I can see, it looks like there would be an image label.
In games like Ultimate Driving, on some menu buttons when you click, it inserts an image of a circle which it then TeenSizes or TweenSizeAndPositions the image.
As for hover, this looks just like tweening the colour.

From the looks of the image you provided, it seems like Material design (by Google). So this could be a good place to start to look for tutorials on how to make this type of thing.


#3

Check out Rostrap, an open source resource management system for Roblox.
Whether you’re looking to use it as it’s intended or not, it’s got a great UI library based on material design, including a ripple pseudo class, and built in ripple buttons.

Also check out their UI Github repo and the file for the Ripple button.

I’m not suggesting you rip the source, it’s just an open source and working example.


#4

It’s actually quite simple.

In order to achieve this, you would need to obtain the client’s mouse from when they click within the bounds of the button. This can be done using:

game.Players.LocalPlayer:GetMouse()

Once you have the mouse, similarly as how 0e_l explained, you would insert an ImageLabel which uses a circle as an image and you would place it as a child of the button with the position of the client’s mouse X and Y attributes.

You can then use TweenSizeAndPosition in order to increase the size of the circle while maintaining the original position of the client’s mouse at the time of clicking the button.

You’d want to make sure that the ClipsDescendants property of the button is set to true as well to ensure that the circle only expands within the bounds of the button.

That should be all though!


#5

Thanks a lot for all your answers! I’m gonna try out RoStrap, as that’s the thing I was looking for! :slight_smile:


#6

The way you can do the hovering part is by using MouseEnter and changing the color. You can get the ripple effect by tweening a circle image.