Animated Button Styles and Hover Effects in E-Learning #89

David Anderson
By David Anderson

Creative Button Styles and Effects in E-Learning

Animated Button Effects #89: Challenge | Recap

I like buttons. There, I said it.

Those simple, ubiquitous little graphics are one of the easiest ways to prompt learners to touch the screen. From animated submit buttons to the despised next button, there are countless designs, styles, and effects to choose from. You can pack a lot of engagement into three basic states:

Button Hover Effects

This week’s challenge is all about buttons. I’ve rounded up a few sites that feature creative hover effects. While not all hover styles and effects are possible in Storyline, there are a lot of creative ideas to help you create your own buttons.

Icon Hover Effects

Here’s a great collection of simple hover effects for circular buttons. Most of the effects can be applied to other button shapes.

Icon Hover Effects

View Icon Hover Effects

Creative Button Styles

Here are some more ideas for subtle hover styles and effects for buttons. I really like the ghost effect used in the hover states.

Creative Button Styles

View Creative Button Styles

CSS3 Button Hover Effects

Great collection of hover effects for buttons. Even though some of the effects aren't possible, there are still many ways to achieve the overall essence of the effects.

CSS3 Button Hover Effects

View CSS3 Hover Effects

Challenge of the Week

This week, your challenge is to have fun with buttons! Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work.

Using Storyline for this week’s challenge? Please consider sharing your .story files. Button graphics make great giveaways and the source files will help a lot of users get up to speed with more advanced button concepts.

Not using Storyline? No problem! You can mock up your 3-state buttons designs in PowerPoint or any other tool. We’re mostly interested in seeing your creative button ideas.

Resources

The Ultimate Guide to Buttons in Storyline 2: Fantastic resource on using buttons in Storyline 2.

Tips for Creating Great Buttons That Stand Out: Bookmark this article for tips on common button characteristics and ideas for creating engaging buttons.

E-Learning Icons: Show and Share Your Favorite Styles #78: Icon challenge with some great tips and examples for creating your own graphics.

In Defense of Eye Candy: Great article that makes the case for design and beauty in web interfaces. The same research applies to the types of graphics we build in e-learning.

Last Week’s Challenge:

Before you begin animating your next buttons, check out the soundboards your fellow community members shared in last week's audio challenge:

12 Interactive Audio Examples for Online Training #88

Interactive Audio in E-Learning #88: Challenge | Recap

Wishing you a button-tastic week, E-Learning Heroes!

New to E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Related Content

Storyline 2: Button Set with Hover Effects

Saurabh Dua
Saurabh Dua
272 Comments
Raphy Abano
4 years ago06/30/15 at 10:19 pm (UTC)
Hi everyone! This is my first time posting as part of any Challegnge in the Articulate forums, so yay! I wanted to share a couple of buttons that I made - I went for subtle animated effects that loop. No gifs here, though. :) https://de72fedda5cbe2327d39e1528800b03dca615cdc.googledrive.com/host/0B7e3lMQWEXRifmFqeksyMkVFRXNuSmdMampIS3FVVDY5SXNQOXBvSXlTcUU4djdTZUd1WmM/
Joanna Kurpiewska
4 years ago07/01/15 at 11:11 am (UTC)
Here's my set of 8 buttons (3 states available): http://bit.ly/1Ksnsz9 I kept it simple and went only for some graphics/color changes. Inspiration for the button icons was: Flat Icons website http://flaticons.net/ and a 'crisp & dramatic' color theme by Canva http://bit.ly/1BnjaWO You can download zipped PowerPoint file with 24 buttons from here: http://bit.ly/1R3ZTR3
Tom Kuhlmann
4 years ago07/08/15 at 4:47 pm (UTC)
On the flickering, one of the challenges with creating graphics in PowerPoint is that you don't really have exact control of the images that are saved. For example, in PowerPoint, it's measured in inches and the image is 1.5". Is it a perfect 1.5" or is it rounded to 1.5"? I don't know. When you insert the saved image in Storyline and look at the dimensions, one is 226 x225 px and the other is 225 x 225 px. Thus the images saved aren't pixel perfect. And that's what I believe causes the intermittent flicker. Hope that helps.
Lisa Emmington
4 years ago07/02/15 at 3:25 pm (UTC)
I have recently been working on a project where we have used icons as buttons to click and reveal Human Resources information. We have a palm tree for leave entitlements, a wheelchair for disability entitlements and a baby's bottle for parental leave entitlements. I thought I'd take this a step further and see what could be done with changing images. These are hand drawn in the format I might use to pass to a graphic designer and I've 'borrowed' Phil Mayor's idea of the inside shadow. http://www.lisaemmington.com/creative-button-styles Have a great vacation!
Jana Brunken
4 years ago07/02/15 at 8:33 pm (UTC)
I only had to view a few of the early submissions before I was inspired to create my own custom buttons. Although I'd used the States functionality before on previous projects, this was a great opportunity to explore many possibilities and to play with different graphic styles. I hope that you'll take the chance to read through the story of my process and to "order a meal" from my submission this week: https://janabrunken.wordpress.com/2015/07/02/creative-menu-buttons/ Any feedback or tips you can give is always appreciated!
Sign In to Comment