Change the border's color of a button in Unity3D

Question

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. :)

Venue

Answer 1

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

Dunk

Answer 2

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:

Succuss

how to change outline color? seems just black works. other color make weird transparent outline – Moidore

This component best works when you apply it to a white component as per my example image. – Succuss

This only works for black outline. Does not work for a white outline. – Steadfast

The outline component multiplies the sprite's color with the outline componen'ts color. If it is not white by default then the desired color will not be the one specified on the outline component. – Succuss

Answer 3

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.

Alcyone