801.796.BROS (2767)
Select Page

eLearning Buttons

A missed opportunity I see eLearning developers overlook is the “clicked state” of their eLearning Buttons.

What is the eLearning buttons clicked state?

These are visual indicators to the user as to which buttons have been clicked and which ones have yet to be explored. Without some graphic indication, your users might miss content. This is especially true if your buttons lead down a multiple slide path (i.e. a menu) or to external pop-up windows. Additionally, I use a clicked button treatment when I have three or more that are “clickable” on a given slide.

There are zillions of ways to approach this, but here are my five favorite clicked button states. Drum roll, please!

1. Check Mark

For the check mark state, simply put a check mark on or near the button. Easy peasy, right?

2. Remove Stroke

Use a stroke on the original button, and hide/remove it when clicked. This state is quick and effective. You also could do this with or without a super robust graphics software.

3. Grey or Desaturated

Experiment with color and desaturate the button, (I hear some designers say, “grey out” the button when it’s clicked). Either way, it’s effective.

4. Pressed Down Button

For the pressed down state, use an internal shadow to make the button appear “indented” or pressed down. This button seems logical since you are actually clicking the button.

5. Clicky Arrow

I call this the “clicky arrow” to indicate that the button has been clicked.

Certainly, there are tons of other ideas that you could do. What other ideas do you have? Feel free to share in the comments and with a link to your button clicked state design! I’d love to see them.


Need more eLearning buttons for your projects? Check out our eLearning Stock Asset Library. Click the button below to learn more.

eLearning Stock Asset Library

Pin It on Pinterest