E-Learning Challenge #89 – Creative Button Styles and Effects in E-Learning

I didn’t think I was going to be able to participate in this one because there just hasn’t been enough hours in the day for me to do anything, and earlier in the week I was pining over whether I could feasibly complete my Guru entry in under 24 hours (spoiler alert – I didn’t – WAH!). Anyhow, I found some time and here we are.

The Concept

This week’s challenge was an easy one: have fun with buttons and adding creative effects – FUN! Thanks, David!

The Method

I usually keep all of my visuals (e.g. icons and free graphics I’ve paid for and/or downloaded for free along the way) on an external hard drive, which I don’t usually have on me at all times. However, I quickly found some lovely sea-themed icons, and got motivated!

For this challenge, I knew I wanted to have an icon, which when clicked or hovered over expanded the option name for that icon. In this case, I kept the names as simple descriptors of the icon, but I imagined having a cog that when clicked expanded to read “Preferences”, so you can definitely use this concept in a more practical application.

Once I chose all of my icons, I added a Hover state to each icon which consisted of a rectangle with the descriptor. I used the eyedropper tool to outline and fill the rectangle and I applied a wipe animation.

The Result

You can view the full interaction by Clicking Here.

If you’re wondering how I did this, you can download the Storyline 2 file by Clicking Here.