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

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.

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.

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.

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.

272 Comments

Lars Eversmann

4 years ago06/29/15 at 3:31 pm (UTC)

Hi, My first challenge and Project with AS 2. I was a lit bit crazy and inspired from the Project of all you. You Need Audio to have more fun. I hope that you like pets and the nature. http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19p040dm61bu817i31ickg92100g4/story.html

4 years ago06/29/15 at 11:55 pm (UTC)

Adorable illustrations :)

4 years ago06/30/15 at 8:53 am (UTC)

Eye catching!

Wilson Santiago

4 years ago06/29/15 at 7:41 pm (UTC)

Here are a few animated Previous and Next buttons I have worked on. They are subject-specific, but I think they are fun and cool to use! https://dl.dropboxusercontent.com/u/78039977/Challenge%20Buttons/story.html Here is the .story file: https://www.dropbox.com/s/jynp91bdcjtesh8/Animated%20Buttons.story?dl=0

David Fair
Staff
Wilson Santiago

4 years ago06/29/15 at 11:59 pm (UTC)

Nice use of animated gifs!

4 years ago06/30/15 at 4:15 am (UTC)

These are AWESOME Wilson :) loved each and every effect...And thanks for sharing!

4 years ago06/30/15 at 5:42 pm (UTC)

Very Nice. A lot of Inspiration.

4 years ago07/02/15 at 10:35 am (UTC)

Animated gifs can be really powerful (and save you a #$%^&load of triggers)

Karen Loftus

4 years ago06/29/15 at 10:25 pm (UTC)

Here's my quick example: http://bit.ly/1NqNeBW

4 years ago06/29/15 at 11:52 pm (UTC)

Oo, I especially like the visited state on button 4. Very creative, Karen!

4 years ago06/30/15 at 9:52 pm (UTC)

These are really nice and professional looking Karen! Great job

4 years ago07/24/15 at 9:55 pm (UTC)

David, can you add mine to the recap page for #89? http://bit.ly/1NqNeBW

Ridvan Saglam

4 years ago06/29/15 at 11:27 pm (UTC)

Here are my icons with different hover effects; https://db.tt/CGdEfZMF Story; https://goo.gl/eEULIO

4 years ago06/29/15 at 11:51 pm (UTC)

Wow, those are beautiful, Rıdvan! The twitter icon might be my favorite. :)

4 years ago06/30/15 at 4:18 am (UTC)

These are STUPENDOUS Ridvan!

4 years ago06/30/15 at 4:19 am (UTC)

These are sooo great that I wanna do one more entry!

4 years ago06/30/15 at 10:58 am (UTC)

Beautiful! I was hovering over the heart waiting for a change of heart... Until I realize I had to click to bring the love. Very nice work!

4 years ago07/02/15 at 10:36 am (UTC)

The circular motion is really really pretty!

4 years ago07/17/15 at 5:16 pm (UTC)

Very nice Ridvan. May I ask how you got the rotating circle on the twitter button? I've looked at it, and don't see any animations attached, and it doesn't look like an animated gif. What's your secret?

4 years ago07/18/15 at 9:25 am (UTC)

Thanks Joe. It's actually an animated gif :) ı added an animated circle gif in hover state. I am sorry, there is no secret ;)

4 years ago07/20/15 at 3:26 pm (UTC)

I figured it had to be that, but just saw png's in the storyline file. Must be a storyline thing that converts them. Thanks!

Zsolt Olah
Hero

4 years ago06/29/15 at 11:46 pm (UTC)

These are all great! I've been hovering all over them! Thanks for sharing!

Rachel Barnum

4 years ago06/30/15 at 1:34 am (UTC)

This one was fun :) inspired by a few of you guys & the links above: http://www.ohthatrachel.com/2015/06/30/e-learning-challenge-89-custom-buttons/ Includes the download link!

4 years ago06/30/15 at 2:05 am (UTC)

Oh, my gosh, that's awesome, Rachel! The marshmallow guy is hands down my favorite. :) The download link isn't working for me, though.

4 years ago06/30/15 at 4:17 pm (UTC)

Fixed! Thanks!

4 years ago06/30/15 at 10:56 am (UTC)

Love the Twitter!! As for the download link you forgot the .com at the ohthatrachel link. Maybe focusing too much on your name? :)

4 years ago06/30/15 at 9:51 pm (UTC)

Thanks Zsolt! And yes... I fixed it woops! I tend to right click/copy location from my FTP server then just fill in all the missing pieces, I forgot the .com!

4 years ago07/02/15 at 7:43 pm (UTC)

I LOVE your little octopus guy!

Ashi (Neha) Tandon

4 years ago06/30/15 at 6:10 am (UTC)

Hola, Here's my second entry. Couldn't resist! http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19p1h884c1veghm31vst7ar1hbc4/story.html

Niki Bray

4 years ago06/30/15 at 2:07 pm (UTC)

This was so much fun and I have a ton of additional ideas! Love all of the demos everyone has shared! http://www.nikibray.com/animated-buttons.html

Lars Eversmann

4 years ago06/30/15 at 5:41 pm (UTC)

Hi everybody, this is my second project for this week. http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19p2ouhadp0r1d8okim1dts104e8/story.html Emi

4 years ago07/08/15 at 1:25 pm (UTC)

I love the animation! It looks like motion paths... How did you do it?!

Alain Darid

4 years ago06/30/15 at 7:04 pm (UTC)

Hello, Here is two boutons 3D for big menu. I hope your give to Idée. Good luck. https://googledrive.com/host//0BzOPqjvqIZNuflg2b1hKTTV3cTNDSjItLXBtemJiY0RjQ0hucUt3YUVCQjZBVS1qdlpfeXM Alain

4 years ago06/30/15 at 7:15 pm (UTC)

Bravo Alain, your button are really nice

4 years ago07/02/15 at 10:43 am (UTC)

ROBOTS!! Cool

Arkadiusz Malkowski

4 years ago06/30/15 at 9:49 pm (UTC)

Hi! My first work https://googledrive.com/host/0B-uFKEFgI1y0NTRUWWtTb2E2YTA

4 years ago06/30/15 at 9:50 pm (UTC)

Oh I love that! Hope to see more from you!

4 years ago07/02/15 at 10:44 am (UTC)

Nice! Very nice!

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/

4 years ago07/02/15 at 10:46 am (UTC)

Welcome to the challenges Raphy! Really dig your entry. Lot's of potential with these.

4 years ago07/02/15 at 7:37 pm (UTC)

That is slick!

4 years ago07/02/15 at 9:34 pm (UTC)

Thanks guys! I finally got around to uploading the .story file (I was having connection problems the other day). Here it is: https://drive.google.com/file/d/0B7e3lMQWEXRiTFl2M1A4UEJUMkE/view?usp=sharing

4 years ago07/02/15 at 9:47 pm (UTC)

Thanks, Raphy! I just updated the recap to include your source file: https://community.articulate.com/articles/inspirational-button-effects-elearning#RaphyAbano

4 years ago07/02/15 at 9:51 pm (UTC)

Thanks David! I felt bad that I couldn't upload the .story file immediately, as I wanted to share what I did with everyone here. :)

4 years ago07/03/15 at 2:15 am (UTC)

Raphy these are awesome! Good job!

Cary Glenn
Hero

4 years ago07/01/15 at 3:06 am (UTC)

Hi, Here is my entry for this week. This challenge was a good skill builder and made me really delve into buttons. Thanks for the great challenge. http://bit.ly/1KrEi0O Here is a .story version https://www.dropbox.com/s/v7bgghlq78if478/ButtonPractice.story?dl=0

4 years ago07/02/15 at 10:47 am (UTC)

Cool isn't it. That's the power of ELHChallenges! I'm digging that 3d push down one.

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

4 years ago07/01/15 at 11:44 am (UTC)

Pure Awesomeness...And thanks for sharing :)

4 years ago07/02/15 at 10:48 am (UTC)

Love the subtle animation. The buttons give sort of a flicker when I hover them, any idea to why that is or is it just me?

4 years ago07/02/15 at 1:17 pm (UTC)

Sorry, I can't explain it, Jeff. These are images imported to SL. They have the same size and are positioned in the same place but even though behave little flickering..

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.

4 years ago07/02/15 at 12:47 pm (UTC)

Adorable, Joanna - and the color changes are a great touch!

4 years ago07/02/15 at 1:18 pm (UTC)

@Ashi, Jeff and Jackie - thank you very much!

4 years ago07/02/15 at 7:36 pm (UTC)

Cute! I LOVE flat things. That's my latest design obsession.

Gena Hocson
Joanna Kurpiewska

4 years ago07/02/15 at 9:48 pm (UTC)

Very nice Joanna! I LOVE Canva, I used one of their layouts as my inspiration for this week too. I also bookmarked that link you shared! :)

4 years ago07/03/15 at 12:57 pm (UTC)

@Stephen and Gena - super happy you like it!

Chuck Jones

4 years ago07/01/15 at 8:18 pm (UTC)

I like the animated effects on hover. With more and more learners using tablet devices (where hover is not a usable feature), I hope these cool effects aren't seeing their last days. Here's my crack at providing additional information about what the button does BEFORE the user clicks it. http://learningonions.com/challenge89/story.html

4 years ago07/02/15 at 10:51 am (UTC)

An alternative to Hover would be the Down state. If youuse that you'd still have a pretty cool effect.

Gena Hocson

4 years ago07/01/15 at 9:00 pm (UTC)

This is a fun challenge! Here's my entry for the week: http://genahocson.com/2015/07/02/elearning-challenge-89/

4 years ago07/02/15 at 12:42 am (UTC)

Cool :)

4 years ago07/02/15 at 7:55 pm (UTC)

Thank you Ridvan! :)

4 years ago07/02/15 at 10:52 am (UTC)

These are so sweet!

4 years ago07/02/15 at 7:55 pm (UTC)

Thanks Jeff. I had a wee peek at your Storyline file to see how you created your buttons. Really cool! Thanks for the inspiration. :)

4 years ago07/02/15 at 12:45 pm (UTC)

Really well done, Gena!

Melissa Milloway

4 years ago07/01/15 at 9:13 pm (UTC)

Here is a button with subtle animations that I just did. This is all done using state changes and no layers. The initial animation is a circle going light pink to dark pink. When you click the button the animation is of an arrow going up and down. http://melslearninglab.com/ELH/button/story.html

4 years ago07/02/15 at 10:53 am (UTC)

I love this!

4 years ago07/02/15 at 1:11 pm (UTC)

Thanks, Jeff. You inspired it!

4 years ago07/02/15 at 12:44 pm (UTC)

Nice, Melissa!

4 years ago07/02/15 at 3:33 pm (UTC)

Thank you, Jackie!

4 years ago07/02/15 at 1:23 pm (UTC)

Nicely done :)

4 years ago07/02/15 at 3:35 pm (UTC)

Thank you, Joanna!

4 years ago07/10/15 at 10:17 pm (UTC)

Love this Melissa

Michelle Archer

4 years ago07/01/15 at 11:28 pm (UTC)

Here's my first challenge submission. I wanted to do something fun with the characters. Feedback is appreciated...I'm still very new and learning, so I am happy to hear any tips & tricks!! https://66f5d3c3c084dd76e7b508618f17f139aea29901.googledrive.com/host/0B0uMaiTf6uJqfk02MEhCUW1iNjR5YkpTOTloQ2cydkktUXFibXBvdENoSVNMUi1ENU82UmM/

4 years ago07/01/15 at 11:34 pm (UTC)

Yours is funny!

4 years ago07/02/15 at 10:54 am (UTC)

Welcome Michelle! Nice entry

4 years ago07/02/15 at 12:42 pm (UTC)

Cute idea, Michelle! Welcome to the challenges. :)

Aleah Ruggles

4 years ago07/01/15 at 11:33 pm (UTC)

This is so fun! I love it!

Jane Maduke

4 years ago07/01/15 at 11:55 pm (UTC)

There have been so many great entries this week and it was such a fun challenge. Credit this week to Jeff and Rachel for ideas and inspiration. Here are some weather effects: http://goo.gl/HJMlVB And the Story file is here: https://dl.dropboxusercontent.com/u/9350043/2015-06-26-Buttons.story Feedback is always appreciated!

4 years ago07/02/15 at 12:01 am (UTC)

Here's the blog post: http://goo.gl/krT9iB.

4 years ago07/02/15 at 10:55 am (UTC)

Diggit! The snow one is cool.

4 years ago07/02/15 at 12:41 pm (UTC)

Very clever, Jane!

4 years ago07/02/15 at 3:28 pm (UTC)

So cool!

Jeff Kortenbosch
Hero

4 years ago07/02/15 at 10:23 am (UTC)

Check out Storyline's most requested feature in action: https://twitter.com/eLearningJeff/status/616245412681371649

Zsolt Olah
Hero
Jeff Kortenbosch

4 years ago07/02/15 at 10:43 am (UTC)

Really cool, Jeff! I like the "butterfly" effect.

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!

Ashley Chiasson

4 years ago07/02/15 at 5:44 pm (UTC)

Here's my entry: Demo: http://ashleychiasson.com/Samples/Buttons/story.html Blog Post: http://wp.me/p4s3cq-gD Free Download: https://www.dropbox.com/s/2arjxzikr2f9e31/Buttons.story?dl=0 I'm excited to go back and check out everyone's entries :)

4 years ago07/02/15 at 6:14 pm (UTC)

Cool use of icons w/ your animated buttons, Ashley! And big THANKS for sharing your source files. Recap updated: https://community.articulate.com/articles/inspirational-button-effects-elearning#AshleyChiasson

4 years ago07/02/15 at 9:18 pm (UTC)

Great combo. Icon buttons are really good and the labels coming out... Very nice touch.

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!

4 years ago07/02/15 at 8:56 pm (UTC)

Hi Jana! I'm getting a 404 error when I try to view your demo. Can you double-check that your permissions are set correctly in Google Drive?

4 years ago07/03/15 at 2:03 am (UTC)

Oh boo! Yes, it was permissions!! Should be fixed now!

4 years ago07/06/15 at 6:54 am (UTC)

I loved the irregular turning hover outline! Great inspiration...

4 years ago07/08/15 at 11:22 pm (UTC)

Jana, very nice and clean interaction! The only thing I noticed when you hover over the Fruit Salad option (not the text but the icon) it keeps restarting the animation instead of playing only once through.

Stephen Brodeur

4 years ago07/02/15 at 8:49 pm (UTC)

This is my first challenge! Excited to share with everyone! http://googledrive.com/host/0B-ekFz_9BA8UfllTWU02QVFZVEtKSE1tWDRLRWZfdGhrTldvNU8xaXB0aGFjaDU1Ukx5a3M (story file is here: https://drive.google.com/file/d/0B-ekFz_9BA8Ua0E3cWZQSzVBemM/view?usp=sharing)

4 years ago07/02/15 at 9:19 pm (UTC)

Hey Stephen. Looks like the link isn't working.

4 years ago07/06/15 at 2:25 pm (UTC)

Thanks, Jeff! Forgot to make the folder public. Should be all set now.

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

Icon Hover Effects

Creative Button Styles

CSS3 Button Hover Effects

Challenge of the Week

Resources

Last Week’s Challenge:

New to E-Learning Challenges?

Related Content

Share Your Button Starter Kits for E-Learning Designers #133

Toggle, Switch, and Slide Your Way to More Creative E-Learning Buttons #97

50+ Animated Buttons and Hover Effects in E-Learning #89

272 Comments