top of page

Unique buttons and states for your elearning

Every great elearning module needs buttons and other interactive objects, and you want your learners to understand at a glance that something on their screen is clickable, so make yours stand out! Here are some tips and designs you could use in your next elearning.

A button should, at the very least, have three states – normal, hover, and visited. These are important in establishing that it is a clickable object when the cursor is hovering over it, and whether the learner has already clicked through to the content. Make sure that these states are easy to tell from each other.

In the following example, the hover state is marked by a drop shadow and moving the button up and to the left 3 pixels in each direction. This gives the impression of the button “popping” off of the screen. There is also a change in the icon on the button. These are all clear markers that something will happen when you click on the button.

The visited state is the button with inverted colours but also with the icon grayed out – this is to make a visible difference (even to vision-impaired learners!) that this button has changed.

If you have a sequence of buttons in your interaction, another way to encourage your learner to click on them is to have something happen to the next button they should click on.

This interaction shows that the learner has clicked on the first arrow, and the effects on the second arrow indicate that it should be clicked next. This is indicated by a glow effect and a change in the outline style and colour.

These are just a few of the ways you can make buttons that say “click me!” to your learner!

For more on creating great interactions that your learner will want to click and explore, contact us today at and see how we can improve the engagement on your content!


Featured Posts
Recent Posts
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page