Creating Userform Buttons That Highlight Mouse Hovering

Learn How To Create An Excel Userform Hover-Over Effect

In this article, I am going to explain the process I use to create an emphasis effect on my userforms when the user hovers their mouse over a specific button. You will be able to do this without the need for any additional software and it is very easy to implement once you understand the concept.

Excel VBA Userform Button Hover Effect

Understanding the Hover Concept

Since the built-in CommandButton object for Userforms is highly dated in appearance and has many restrictions in terms of how it can be formatted, I have opted to work with Image Controls for buttons instead. Since images are static and cannot for example change color during run-time, we will be using two images per single button. One image will represent the un-hovered state and the other will represent the hovered state.

The concept is fairly straightforward: we will enact VBA code that will toggle the visibility of the two images based on the location of the users mouse. This will essentially create a toggle button. You can think of it as a curtain we are opening and closing to reveal the actual button behind. The cursor’s position will dictate whether the curtain parts or closes.

Creating The Button Images In Excel

Let’s first create the buttons inside Excel using a textbox. You should already have in mind how you would like your buttons to look. For this example, we will be using “Excel Green” and a basic white/grey format to indicate whether the user is hovering over a particular button.

Things to keep in mind while creating your buttons:

  • What font type and size is your userform using?

  • What font color is your userform using?

  • How big are the controls within your userform?

For the purposes of this tutorial, I am going to assume you are using the default sizes/formatting for the userform control. Below outlines the formats I have chosen to apply to my buttons made out of regular Excel Textboxes.

Build VBA Userform Button Within Excel Spreadsheet

One thing to keep in mind is that the buttons need to be the EXACT SAME SIZE. This means if you have a button with a border, all your buttons will need to possess a border. In my example above, the green buttons do have a 1pt border included, it is just the same color as the fill color, so no visible border appears to the user. This ensures all four buttons will be exactly the same size at the pixel level when we add them to our userform.

Adding Image Buttons To Userforms

In this section, I will walk you through how to get one of the buttons you made in the previous section into a Userform. Throughout this section, you will be interacting a lot with the Properties Pane. If you do not see the Properties Pane when you open the Visual Basic Editor, you can hit the F4 key on your keyboard to make it appear (or the long way would be to navigate to View > Properties Window)

Step 1-2.png

Step 1

Before we begin, you should already have your userform build. I also recommend making the userform’s BackColor white and turning the BackStyle for labels to 0-fmBackStyleTransparent. Those two options can be accessed within the Properties Pane when you select a specific control.

Step 2

Visual Basic Editor Toolbox Dialog

First, we will open up the Toolbox dialog (shown to the right) and insert an Image control. If you do not see the Toolbox floating around your screen within the Visual Basic Editor, you can access it via the View menu and selecting Toolbox. The Image control will appear as a grey box with a dark border once place on your userform.


Step 3-4.png

Step 3

Next, you will want to insert one of the textbox buttons you created into the Image Control. To do this, simply go to your spreadsheet and copy your desired textbox (ctrl + c). Then navigate back to the Visual Basic Editor and select the Image Control. Finally, go to the Properties Pane and click inside the field labeled Picture. Use the keyboard shortcut Ctrl + v and the fields value should change from “(None)” to “(Bitmap)”. You should now see the image appear within the control.

Step 4

To clean up the appearance a little further, go back to the Properties Pane with the Image Control still selected and make the following changes:

  • BorderStyle = 0-fmBorderStyleNone

  • BackStyle = 0-fmBackStyleTransparent

Finally, I recommend tightening up the size of the control to get it as close to the actual image size as possible. I typically leave 1-2 pixels of whitespace between the Image Control’s border and the edges of the image within it.


Step 5-6.png

Step 5

Next, we will begin to make our second button which will represent the inactive (un-hovered) state. Go ahead and copy the Image Control (ctrl + c) and paste it (ctrl +v) somewhere else on your userform.

Step 6

To change the image of this second Image Control, simply redo Step 3 and copy/paste the White Button into it.


Step 7.png

Step 7

Place the White OK button exactly on top of the Green OK button. You can do this by using your mouse or you can input the Top and Left properties within the Properties Pane so that the location of both buttons are exactly the same. If you have Align to Grid turned on (Tools menu > Options > General > Align Controls to Grid), it should be fairly easy to get them on top of each other with the mouse.

Creating A Hover With VBA

To illustrate the hovering technique more clearly, I went ahead and added another button to the userform (shown below). Circling back to the concept of what we are going to be doing here from a VBA front, note we have essentially two white buttons covering up our green, actionable buttons (the buttons the user will actually be clicking with their mouse).

If you think about it, all we need to do is write some VBA that hides the white buttons when the user’s mouse hovers over them. This reveals the desired green button and gives the user the opportunity to click it (think back to the curtain analogy from earlier).

So let’s get into a little VBA coding!

Final Userform UI

MouseMove Event

If you have done any work with Userforms, you know that events are vital to making the user experience feel “normal”. For this effect, we are going to be using the MouseMove event which tracks which pixel on the screen the user’s cursor is currently touching. The moment the cursor moves to a pixel within a specific control, that control’s MouseMove event fires and the code attributed to it begins to run. This is precisely how we will know when to toggle our button images to create the hover effect!

Image Control Names

Before we write any VBA macros, let’s be clear on what I have named the Image Controls for this example. Below are the four names I have attributed to the controls via the Properties Pane > Name field.

CancelButtonInactive = White Cancel Button
OKButtonInactive = White OK Button
CancelButton = Green Cancel Button (This is the real button that will call your VBA macro)
OKButton = Green OK Button (This is the real button that will call your VBA macro)

The OK Button

Below is the VBA code we will attribute to the OKButtonInactive (white OK button) image control. Note that the MouseMove event has a bunch of inputs (Button, Shift, X, Y). We will not be using any of these, however, the will need to be explicitly written as shown below in order for the VBA code to compile properly.

Essentially what the VBA code does is when the user’s cursor hovers over the OKButtonInactive control, it will hide itself, revealing the green OK button underneath of it.

You’ll also notice that the code is also making sure the CancelButtonInactive control is visible. This prevents any risk of the user hopping from the Cancel button to the OK button “turning” both buttons green. This is a very important concept as you will need to be sure you account for all buttons on your userform that are using this hover technique.

Sub OKButtonInactive_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
'PURPOSE: Make OK Button appear Green when hovered on

  CancelButtonInactive.Visible = True
  OKButtonInactive.Visible = False

End Sub

The Cancel Button

I won’t go into as much detail as the previous section, but the below VBA code is essentially do the exact same thing except for the Cancel Button.

Sub CancelButtonInactive_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
'PURPOSE: Make Cancel Button appear Green when hovered on

CancelButtonInactive.Visible = False
OKButtonInactive.Visible = True

End Sub

Accounting For No Hovering Action

Up until now, we have assumed either the user’s cursor is on the OK button or the Cancel button. But what if the user has their cursor somewhere else? In that case, we don’t want any of the buttons to appear as green. By using the Userform_MouseMove event, we can essentially reset the userform by making all the white buttons visible. The precise moment the cursor moves off a control and onto the Userform’s background, this VBA code will trigger and change the visibility state of our buttons.

Sub Userform_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
'PURPOSE: Reset Userform buttons to Inactive Status

CancelButtonInactive.Visible = True
OKButtonInactive.Visible = True

End Sub

Be Careful About Control Proximity

Early on when I was perfecting this technique, I ran into issues when my controls were too close together. Based on your userform’s layout, there may be a risk that you perform what I have coined as “control hopping”. This is where your cursor moves directly from one control to the other without triggering the Userform_MouseMove event. This theoretically shouldn’t happen since the cursor has to move onto the Userforms background if there is even one pixel of space between your control.

What I recommend doing is testing your userform by moving your mouse over it quickly to see if you can trigger a state where multiple buttons appear to be highlighted at the same time. To fix this you can either add extra space between the controls on the screen or add a MouseMove event to that control that runs the exact same code as the Userform_MouseMove subroutine.

You Now Have Hover-Buttons!

If you’ve followed along all the steps, you should now have a functioning userform with buttons that change format every time the cursor hovers over them. If you are still unclear or would like to see these results in an actual Excel workbook, I have put together a downloadable spreadsheet you can comb through. As with all my downloadable files here on TheSpreadsheetGuru, you need to be a member of my Excel Tips Newsletter. You can get signed up quickly by clicking the button below.

 
Already Subscribed? Click   HERE   to log-in to the "Example Files" section

Already Subscribed? Click HERE to log-in to the "Example Files" section

 

How Do I Modify This To Fit My Specific Needs?

Chances are this post did not give you the exact answer you were looking for. We all have different situations and it's impossible to account for every particular need one might have. That's why I want to share with you: My Guide to Getting the Solution to your Problems FAST! In this article, I explain the best strategies I have come up with over the years to getting quick answers to complex problems in Excel, PowerPoint, VBA, you name it

I highly recommend that you check this guide out before asking me or anyone else in the comments section to solve your specific problem. I can guarantee 9 times out of 10, one of my strategies will get you the answer(s) you are needing faster than it will take me to get back to you with a possible solution. I try my best to help everyone out, but sometimes I don't have time to fit everyone's questions in (there never seem to be quite enough hours in the day!).

I wish you the best of luck and I hope this tutorial gets you heading in the right direction!

Chris
Founder of TheSpreadsheetGuru