COMMAND-BUTTON ANIMATION

Introduction

Microsoft Access, the relational database management system, is a jewel among the Microsoft Office suite of applications. It offers powerful design tools and a built-in Visual Basic for Applications (VBA) programming environment. These pages are not intended for beginners, but rather for users who already have a foundational understanding of database design using MS Access—working with tables, queries, forms, reports, and macros—as well as a general familiarity with VBA, including modules, class modules, functions, and event procedures.

When developing an application using any database management system, it should not only be functional but also user-friendly and visually appealing. A poorly designed interface can diminish the overall impact of the project and reflect the lack of creativity or an ineffective approach to data processing on the part of the developer. A well-designed database enhances usability, improves user experience, and demonstrates professionalism in both design and execution.

Here, I’d like to share a few programs I’ve developed for use with form controls—each with some amusing and creative twists that I’ve incorporated into my own projects. I’m confident you’ll find them both interesting and useful.

These demo programs were originally written for Access 2000 and are also compatible with Access 97.

Attaching Access System Reference Library Files.

First and foremost, ensure that the essential Microsoft Access reference library files are attached to your project. To configure Microsoft Access properly, follow these steps:

1. Open the Visual Basic Editor window by selecting Visual Basic Editor from the Tools menu or Code from the View menu in the Access interface.
2. In the Visual Basic Editor, go to the Tools menu and select References.
3. In the Available References dialog box, place a check mark next to the following essential library files:
• Visual Basic for Applications
• Microsoft Access 11.0 Object Library
• OLE Automation.
• Microsoft DAO 3.6 Object Library
• Microsoft ActiveX Data Objects 2.5 Library
• Microsoft Office 11.0 Object Library
• Microsoft Visual Basic for Applications Extensibility 5.3

These references are required to ensure that your VBA code functions correctly and can interact with the Access objects and features.

Design Modification

On the Microsoft Access user interface, the command button is one of the most frequently used controls, second only to text boxes. It typically carries a clear label indicating the action it performs when clicked. However, beyond its basic functionality, we often overlook its potential for enhancing interactivity and user experience.

Here, we're aiming to make the command button a more engaging and visually appealing element on the form. By introducing subtle animated effects, we can bring the button to life on the screen and enhance the user experience.

This can be achieved by placing a dark-colored rectangle behind the command button and using just a few lines of VBA code to animate its behavior. The result is a dynamic, attention-grabbing control that stands out and adds a creative touch to your form's design.

Animating Command Button

The animation design is simple yet effective. A rectangular control, nearly the same size as the command button and filled with a black background, is positioned directly behind the button and kept hidden by default.

When the mouse moves over the command button, the button shifts slightly upward and to the left, revealing part of the rectangle beneath it, creating a subtle shadow effect. As the mouse moves away, the button returns to its original position, hiding the rectangle again. This creates the illusion of the button lifting off the surface, adding a touch of interactivity and visual appeal to the form.

When this action is repeated in quick succession, the command button gives a lively and dynamic appearance, as it moves up and down, alternately revealing and hiding the shadow effect beneath it. This simple animation creates an engaging visual cue for the user, making the button feel more interactive and responsive. Refer to the images above to see both states of the command button—its default position and the animated state with the visible shadow.

Copy and paste the following VBA code into a new Global Module:

Public Function ButtonAnimate(ByVal strForm As String,ByVal mode As Integer, ByVal lblName As String)
'------------------------------------------------------------
'Command Button Animation
'Author : a.p.r. pillai
'Date : September 2006
'------------------------------------------------------------
Dim FRM As Form, l As Long, t As Long
On Error GoTo ButtonAnimate_Err
Set FRM = Forms(strForm)
l = FRM.Controls(lblName & "Box").Left
t = FRM.Controls(lblName & "Box").Top
If (mode = 1) And (FRM.Controls(lblName & "Box").Visible = False) Then
    FRM.Controls(lblName & "Box").Visible = True
    FRM.Controls(lblName).Left = l - (0.0208 * 1440)' 0.0208 inches
    FRM.Controls(lblName).Top = t - (0.0208 * 1440)' 0.0208 inches
    FRM.Controls(lblName).FontWeight = 700
ElseIf (mode = 0) And (FRM.Controls(lblName & "Box").Visible = True) Then
    FRM.Controls(lblName & "Box").Visible = False
    FRM.Controls(lblName).Left = l
    FRM.Controls(lblName).Top = t
    FRM.Controls(lblName).FontWeight = 400
End If
ButtonAnimate_Exit:
Exit Function

ButtonAnimate_Err:
Err.Clear
Resume ButtonAnimate_Exit
End Function

Note: All object specifications on this site are in U.S. Measurements.

Those who follow the Metric System, please convert the values or select the US in the Regional Settings of the Control Panel or convert the given values into your Regional values.

Command Button Animation Design:

1. Open one of your Access Forms in Design View.
2. Create a Command Button control on the Footer Section of the form.
3. Display the Property Sheet (F4) of the command button and change the following Property values as given below:

       Name = cmdClose
       Caption = Close
       ControlTipText = Click

4. Create a rectangle control in the footer section of the form, ensuring it is slightly smaller in both height and width than the command button. This sizing ensures that when the command button is placed directly over the rectangle, the rectangle remains completely hidden beneath it. This setup allows for a clean visual effect when animating the button, as the rectangle will only become partially visible when the button shifts position during the mouse-over event.
5. Change the following property values of the rectangle control:

       Name = cmdCloseBox

   Note: The name of the rectangle control must be the same as the command button, suffixed with the word ‘Box’.

       Visible = False
       SpecialEffect = Shadowed
       BorderColor = 0
       BorderStyle = Solid
       BackStyle = Transparent

6. Drag and position the rectangle control precisely underneath the command button so that it is completely hidden from view. To fine-tune its placement, you can use the Ctrl key with the arrow keys in MS Access 2000, or simply the arrow keys alone in later versions of Access, for pixel-level alignment.

   If the rectangle control appears on top of the command button, making it visible, click the "Send to Back" button on the toolbar, or choose Format → Send to Back from the menu. This ensures the command button remains fully visible while the rectangle stays hidden beneath it, ready to create the shadow effect during mouse-over animation.

7. Copy and paste the following Code into the Form’s Visual Basic Module and save the Form:

   Private Sub cmdClose_MouseMove(Button as Integer, Shift as Integer, X as Single, Y as single)
   ButtonAnimate Me.Name, 1, "cmdClose"
   End Sub
   
   Private Sub FormFooter_MouseMove(Button as Integer, Shift As Integer, X As Single, Y As Single)
   ButtonAnimate Me.Name, 0, "cmdClose"
   End Sub

8. Open the Form in normal view and try moving the Mouse over the Command Button and over the blank area in the Form Footer in a continuous stroke.

When the mouse moves over the command button, the button shifts slightly upward and to the left, revealing a portion of the rectangle underneath. This exposed area creates the illusion of a shadow, giving the button a lifted appearance. When the mouse moves away—such as into the blank area of the form’s footer section—the button returns to its original position, concealing the rectangle once again. Repeating this interaction gives the command button a lively and dynamic feel, making it stand out among the other static controls on the form.@@@

Add More Animated Command Buttons

You can add any number of command buttons to the form using this technique by placing the appropriate code in each button’s MouseMove event procedure. When the ButtonAnimate function is called with a parameter value of 1, it moves the button slightly upward and to the left, creating the shadow effect. Passing a value of 0 resets the button to its original position, hiding the shadow.

If additional buttons are placed in the form footer, each button should have its own MouseMove event that calls ButtonAnimate(1). The Form Footer’s MouseMove event should include a call to ButtonAnimate(0) to reset all buttons when the mouse moves away. This ensures each button responds independently while maintaining consistent animation behavior across the form.

Download Demo CommandButtonAnimation.zip


1. Command Button Animation
2. Double Action Command Button
3. Colorful Command Buttons
4. Transparent Command Button
5. Command Button Animation-2
6. Creating Animated Command Button with VBA
7. Command Button Color Change on Mouse Move