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.

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.

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

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

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

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

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

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!

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. Feel free to directly download the spreadsheet by clicking the download button below.

Format Excel Charts Like a Pro!!!

Learn my best Excel chart design hacks. These will turn your ugly charts into professionally crafted graphics, leaving your boss speechless!!!

Get These Hacks Now For Free!

Keep Learning

Explore more →

Build A United States Dashboard Map Chart In Excel

Map Charts In Excel Are Limited… Let’s face it, Excel’s built-in Map Chart feature seemingly was thrown together overnight. Its...

Will VBA Die in 2022? Is It Worth Learning? [Inside Scoop]

VBA is a coding language used by millions of people across the world to automate tasks in Microsoft Office products....

How To Password Protect Opening An Excel File

Protecting Your Excel Files With A Password There are often files within an organization that need to be restricted from certain...

Chris Newman

Chris is a finance professional and Excel MVP recognized by Microsoft since 2016. With his expertise, he founded TheSpreadsheetGuru blog to help fellow Excel users, where he shares his vast creative solutions & expertise. In addition, he has developed over 7 widely-used Excel Add-ins that have been embraced by individuals and companies worldwide.