Create a Button with hover effect in Xojo

Drag a Canvas object onto your form from the Library. Click the Canvas object and select the Inspector, top right, and turn off UseFocusRing and for Backdrop select your default image. You can select the hover image as a Backdrop as well as it will add the image to your project and save you time, otherwise drag and drop the hover image into the Project Contents. Rename your Canvas object as btnHover int the Name field in the Inspector – hit the enter key to set the name or it will revert back to the default name, at least on Mac.

Right click the btnHover object and add the following four Event Handlers:


Click the MouseEnter and add the following code. The image name should appear in your contents, don’t worry about the path or extension.


Do the same for MouseExit, only set as your default image.

Click MouseUp and add the following code:



I’ll be posting more of these as I am developing a project in Xojo (RealBasic) since I got it for $20 through MacHeist. Pretty easy to work in and the language is Basic so it’s pretty easy too.