Mouse over GUI simple effect

This is quite simple but still makes UI look much better :grin:

Overlay
-----
Adding a text button and subtracting a little off all four sides of it inside another text button adds a cool entering effect
-----

This is a shop gui made for a game called Downhill Dash being made by @SummerEquinox and myself.

7 Likes

Seems confusing. Is my mouse over the button when the border lights up? I have no idea.

6 Likes

I agree.

Would probably look / feel better if the inside didn’t become darker when you’re over it, only when you actually click it.

You should include the properties of the textboxes/labels so it’s easier to follow (color differences, active settings, etc)

Ehh, this isn’t a very good tutorial for this. It doesn’t have any actual properties or anything past the text box border selected, and it has no end result GIF of any sort.

1 Like

There isn’t much depth to that tutorial, I am relatively confused as to what this is attempting to convey.

TextBox is not a replacement for TextLabel. TextBox is for typing, and TextLabel is for the display of text.

If what is trying to be accomplished here is getting rid of the button coloring, there’s AutoButtonColor.

Then again, I’m still really confused.

2 Likes

I’m quite confused by this tutorial as well. I expected there to be some coding involved and at least some higher-level skills that the average user would not have.

@FearMeIAmLag If the average user didn’t get this how would they get some code if it was involved?

@WentLimited Why is this a tutorial? Everything you went over is easy and doesn’t require any coding skills.

The purpose of the tutorial section is to explain to a user how to do a specific task. If you include code you should be expected to explain it. I’m not saying everyone knows how to do what you wrote let alone code, but if you explain it enough people should begin to understand it. Your original post does not provide much of an explanation even with how simple the task at hand is.

As others have mentioned, this doesn’t seem like that expansive of a tutorial, and would be more appropriate to accomplish through scripts than hacking together. Have you considered creating a module for creating different mouseover/click effects that can be easily added to buttons and releasing that?

Why make it so complicated for no reason?

It’s as complicated as you’d make it. If your intended audience is non-scripters, then provide BoolValue settings/etc rather than opening a script. Why use a script instead of what was done in the OP? The behavior in the OP is a hack and is not guaranteed to continue working (e.g. if ROBLOX changes it so hover doesn’t pass through buttons, the outer edge would turn back to default when you moused over the inner element).

I thought I would be able to make a mouse over gui effect after this tutorial, now I’m more confused as I was in the beginning.

1 Like

I think one key factor you forgot to mention was that the TextButton beneath would change colour if this property was set to true:

image

Please correct me if I am wrong.

1 Like

lol

So… where’s the tutorial?

3 Likes

Just a heads up: If you intend to place Parts in the box where it say ā€œSled 3D module goes hereā€, then you’re going to have a hard time doing so because GUI always renders on top of parts (unless, of course, you’re using SurfaceGui.)

Yeah, I am having difficulties. Do you know of any way to put it on top of the GUI’s? I’v seen games that have done it.

This should be in #development-discussion:cool-creations rather than #tutorials:tutorials because this isn’t really a tutorial.

@Lilly_S

2 Likes