I began to work with Unity3D since one month and I'm trying to do an application which contains a menu, composed by a panel and several buttons. At this moment, I'm trying to customize the menu, I change the fill color of the panel and buttons, but until now I could not change the border color of the buttons. There is any way to customize the border's color of the UI buttons? I would appreciate your help. :)
Asked
Active
Viewed 2.2k times
3 Answers
12
The easiest way to add an outline to your button is to use the Outline component (doc).
Simply add the Outline component where your button image or text is. Then configure it how you like it :)
The above results in the following button:
Menyus
- 6,633
- 4
- 16
- 36
-
how to change outline color? seems just black works. other color make weird transparent outline – Jetwiz Jan 13 '23 at 20:01
-
This component best works when you apply it to a white component as per my example image. – Menyus Jan 14 '23 at 08:49
4
No, you can not change just border color. If you use default buttons, take a look at Source image. It is basically a grey square with black borders. So when you change color of image black color remains black.
To customize buttons as you want you need either create nested UI elements:
or create sprites with colors you want and replace source image
obywan
- 854
- 8
- 14
2
I find nested UI elements to be the easiest way to do something like this. Simple example:
Start out by creating a panel and change the scale until you get the desired size for your button. This will be your "borders".
Next create another panel as a child of the panel you just made and change the scale to be just slightly smaller than your first panel and change the color.
In the Inspector for your panel, add component and type in Button and add it as a component.
Finally, add a text as a child of your panel for a label and you're done.
Dtb49
- 1,211
- 2
- 19
- 48