Color tint when mouse pointer is over the button

There are several ways in which we can visually inform the user that the button is interactive when they move their mouse cursor over it. The simplest is to add a Color Tint that will appear when the mouse is over the button – this is the default Transition. With the Button selected in the Hierarchy, choose a tint color (for example, red), for the Highlighted Color property of the Button (Script) component, in the Inspector tab:

Another form of visual Transition to inform the user of an active button is Sprite Swap. In this case, properties for different images for Targeted/Highlighted/Pressed/Disabled are available in the Inspector panel. The default Targeted Graphic is the built-in Unity Button (Image) – this is the grey rounded rectangle default when GameObject buttons are created. Dragging in a very different-looking image for the Highlighted Sprite is an effective alternative to set a Color Tint. We have provided a rainbow.png image with the project for this recipe that can be used for the Button mouse over Highlighted Sprite. The screenshot shows the button with this rainbow background image: