wijzig taal:

Formulieren in Excel en Word zijn behoorlijk statisch. Om de gebruikservaring te verbeteren zou het mooi zijn dat de commandbuttons op de fomulieren een hover effect krijgen. Dat houdt bijvoorbeeld in dat de achtergrondkleur en muisaanwijzer veranderen als er met de muis overheen bewogen wordt:

maken van button hover effect

De formulieren worden daardoor dynamischer. Dit is echter geen standaard functionaliteit van een commandbutton.

In dit artikel wordt een hele flexibele methode gepresenteerd waarbij een hover effect kan worden toegevoegd aan alle commandbuttons op een formulier door middel van het toevoegen van enkele coderegels aan dat formulier. Er hoeven verder geen aanpassingen aan het formulier te worden gedaan. Er hoeven dus geen andere controls te worden toegevoegd of dergelijke, maar een paar extra coderegels volstaat.

Het hover effect wordt geregeld met behulp van twee klassenmodules. In de eerste klassenmodule wordt een referentie gelegd naar het betreffende formulier en vanuit deze klasse worden dan automatisch referenties gelegd naar alle aanwezige commandbuttons op het formulier. Voor het hover effect wordt met name gebruik gemaakt van de MouseMove-gebeurtenis van de commandbuttons en van het formulier.

Om het hover effect te kunnen toepassen moeten dus eerst twee klassenmodules worden aangemaakt (via Invoegen Klassenmodule). Geef de eerste klassenmodule de naam clFormHoverEffect en voeg daaraan de volgende code toe:

'------------------------------------------------------------------------------------------------------------------------------
' Auteur    : Manfred van den Noort
' Copyright : © 2020-2024 worksheetsvba.com, alle rechten voorbehouden
' Versie    : 1.1
' Datum     : 2023-10-06
' Doel      : Maken van Button Hover effect
'------------------------------------------------------------------------------------------------------------------------------

Private WithEvents frmHover As MSForms.UserForm
Private oColButtons As Collection, sHoveredButton As String

Private Sub Class_Initialize()
    Set oColButtons = New Collection
End Sub

Friend Property Set HoverForm(ByRef oFrm As Object)
    Set frmHover = oFrm
End Property

Friend Sub AddButtons()
    Dim ctl As Control, oHoverButton As clHoverButton
    For Each ctl In frmHover.Controls
        If TypeName(ctl) = "CommandButton" Then
            Set oHoverButton = New clHoverButton
            With oHoverButton
                Set .ParentForm = Me
                Set .HoverButton = ctl
                .Initialize
            End With
            oColButtons.Add oHoverButton, ctl.Name
            Set oHoverButton = Nothing
        End If
    Next
End Sub

Private Sub frmHover_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
    RemoveHoverEffect
End Sub

Friend Sub ApplyHoverEffect(ByVal sCtlName As String)
    If sHoveredButton = vbNullString Or sHoveredButton <> sCtlName Then
        If sHoveredButton <> sCtlName Then RemoveHoverEffect
        frmHover.Controls(sCtlName).BackColor = &H85E8FF
        sHoveredButton = sCtlName
    End If
End Sub

Friend Sub RemoveHoverEffect()
    If sHoveredButton <> vbNullString Then
        frmHover.Controls(sHoveredButton).BackColor = oColButtons.Item(sHoveredButton).InitialBackColor
        sHoveredButton = vbNullString
    End If
End Sub

Friend Sub TerminateButtonHover()
    Dim i As Integer
    For i = 1 To oColButtons.Count
        oColButtons.Remove 1
    Next
    Set oColButtons = Nothing
End Sub

Private Sub Class_Terminate()
    Set frmHover = Nothing
End Sub

Geef de tweede klassemodule de naam clHoverButton en voeg daaraan de volgende code toe:

'------------------------------------------------------------------------------------------------------------------------------
' Auteur    : Manfred van den Noort
' Copyright : © 2020-2024 worksheetsvba.com, alle rechten voorbehouden
' Versie    : 1.1
' Datum     : 2023-10-06
' Doel      : Maken van Button Hover effect
'------------------------------------------------------------------------------------------------------------------------------

Private oParentForm As clFormHoverEffect, iInitialBackColor As Long
Private WithEvents oCmdBtn As MSForms.CommandButton

Friend Property Set ParentForm(ByRef oValue As clFormHoverEffect)
    Set oParentForm = oValue
End Property

Friend Property Set HoverButton(ByRef oValue As MSForms.CommandButton)
    Set oCmdBtn = oValue
End Property

Private Property Let InitialBackColor(ByVal iValue As Long)
    iInitialBackColor = iValue
End Property

Public Property Get InitialBackColor() As Long
    InitialBackColor = iInitialBackColor
End Property

Friend Sub Initialize()
    With oCmdBtn
        InitialBackColor = .BackColor
        .MousePointer = fmMousePointerCustom
        If Len(Dir(ThisWorkbook.Path & "\HandCursor.ico")) Then
            .MouseIcon = LoadPicture(ThisWorkbook.Path & "\HandCursor.ico")
        End If
    End With
End Sub

Private Sub oCmdBtn_Click()
    oParentForm.RemoveHoverEffect
End Sub

Private Sub oCmdBtn_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
    If Not oCmdBtn.Locked Then
        If X > 2 And X < oCmdBtn.Width - 2 And Y > 2 And Y < oCmdBtn.Height - 2 Then
            oParentForm.ApplyHoverEffect oCmdBtn.Name
        Else
            oParentForm.RemoveHoverEffect
        End If
    End If
End Sub

Private Sub Class_Terminate()
    Set oCmdBtn = Nothing
    Set oParentForm = Nothing
End Sub

Met deze twee klassenmodules wordt het hovereffect van de commandbuttons geregeld. De eerste klasse is gekoppeld aan het formulier en de tweede klasse aan de commandbuttons van het formulier.

Om dit hover effect op een formulier te laten werken moet helemaal bovenaan in het codescherm van een formulier de volgende variabele worden gedeclareerd:

Private oHoverForm As New clFormHoverEffect

Vervolgens moeten de volgende 5 regels toegevoegd worden aan de UserForm_Initialize gebeurtenis:

Set oHoverForm = New clFormHoverEffect
With oHoverForm
    Set .HoverForm = Me
    .AddButtons
End With

En tenslotte moet de volgende 2 regels toegevoegd worden aan de UserForm_QueryClose gebeurtenis:

oHoverForm.TerminateButtonHover
Set oHoverForm = Nothing

Dus alle code achter een formulier dat nodig is voor het hover effect ziet er dan als volgt uit:

Private oHoverForm As New clFormHoverEffect

Private Sub UserForm_Initialize()
    Set oHoverForm = New clFormHoverEffect
    With oHoverForm
        Set .HoverForm = Me
        .AddButtons
    End With
End Sub

Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
    oHoverForm.TerminateButtonHover
    Set oHoverForm = Nothing
End Sub
Het hover effect wordt alleen toegepast op commandbuttons die ingeschakeld zijn en die niet zijn gelocked. Ook wordt de muisaanwijzer gewijzigd. Dat laatste gebeurt alleen als in dezelfde map als het bestand een ico-bestand met de naam HandCursor.ico aanwezig is. Klik op onderstaande button om een voorbeeldbestand te downloaden. In dit voorbeeld is ook een ico-bestand bijgesloten.
zip-3Maken van button hover effect 1.1
 

Vragen / suggesties

Hopelijk heeft dit artikel geholpen bij het maken van een button hover effect op een VBA formulier. Als er verdere vragen over dit onderwerp zijn of suggesties voor verbetering, plaats dan een reactie hieronder.

arrow_up