How to Create This Button Hover Effect?

Help and Feedback Art Design Support
, ,
#1

A Bit About Me

Hey everyone! If you did not know, I am very interested in UIs. I especially enjoy coming up with unique hover and click effects (I know I focus on the unnecessary things :nerd_face:) that are unlike any others out there and this is why this topic exists in the first place.

What I’m Trying to Recreate, Is It Possible?

As some of you may know, Windows 10 has a whole set of new buttons and their designated click effects. I especially like this button’s click effect:

Windows10Click
Notice how where the mouse is being clicked, the button “presses back” there. The farther the mouse is being clicked, the more “deformed” the button becomes (in a good way).

I really believe this click effect is cool. I just want to know if something like this is possible in Roblox (just recreating this effect not copying).

The Idea I Have Thought of so Far

Viewport Frames (VP frames) There could be a button on top of this frame, and when it is clicked a part inside the VP frame turns the way where the mouse was clicked.

Conclusion

And that is the only idea I have. Obviously there would be a lot of maths involved with this (about where in pixels the mouse is clicked relative to the button’s top left corner, how much the “part” inside the VP frame turns depending on how close the click was to the edge, and etc.). I just do not really think the VP frame idea is efficient. I mean sure, it does the task at hand, but what about performance? I read on the Hub that moving parts inside VP frames can cause FPS drops, especially when there are multiple like in this scenario.

Any other ideas that would recreate this click effect?
Thank you.

1 Like
#4

You can check if the player has hovered over the button and then you can change the BorderSizePixel and BorderColor3 by then.
https://scriptinghelpers.org/questions/19385/way-to-tell-if-mouse-is-hovering-over-a-textbutton-or-imagebutton
You can also check if the player has the button down or up, and then you can recreate the “presses back” effect by changing the size a bit smaller and increasing the BackgroundTransparency when the button is down, and then tweening the size back to normal when the button is up.

#6

My apologies, the GIF was very tiny and I couldn’t successfully examine it.

1 Like
#8

This might sound complicated, but you can create an invisible GUI at the center of the button that detects if any other GUIs are next to it, after that you can make a small invisible GUI that follows the position of the mouse when it is hovering over the button, and then you could constantly check if there are any GUIs around the GUI in the middle by using BasePlayerGui:GetGuiObjectsAtPosition(), after that, you could calculate if the position of the GUI is negative, then you can create another GUI on the right side [positive side] and tween it, or if it is positive, you can create another GUI on the left side [negative side] https://developer.roblox.com/en-us/api-reference/function/BasePlayerGui/GetGuiObjectsAtPosition

1 Like
#9

You’d just need to use MouseButton1Down, detect when the player presses down on the button then change the button to fit it to that style though roblox already has kinda done it in that type of style? Then, when they let go, do whatever you need to do to it, if needed, you can use MouseButton1Up:

https://developer.roblox.com/en-us/api-reference/event/GuiButton/MouseButton1Down

1 Like
#10

This effect is impossible to be made in ROBLOX right now since ScreenGui don’t have 3D support.

3 Likes
#11

It does we have viewport frames, also you wouldn’t use 3d objects, and you usually wouldn’t do that you’d just make it look like 3d instead.

2 Likes
#12

that reply was made before the viewportframe is a thing… lol

4 Likes