\n
Animated Button Effects #89: Challenge | Recap
\n
Challenge of the Week
\n
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.
\n
Examples of Animated Button Effects
\n
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.
\n
Icon Hover Effects
\n
Here’s a great collection of simple hover effects for circular buttons. Most of the effects can be applied to other button shapes.
\n
\n
View Icon Hover Effects
\n
Creative Button Styles
\n
Here are some more ideas for subtle hover styles and effects for buttons. I really like the ghost effect used in the hover states.
\n
\n
View Creative Button Styles
\n
CSS3 Button Hover Effects
\n
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.
\n
\n
View CSS3 Hover Effects
\n
Last Week’s Challenge:
\n
Before you begin animating your next buttons, check out the soundboards your fellow community members shared in last week's audio challenge:
\n
\n
Interactive Audio in E-Learning #88: Challenge | Recap
\n
Wishing you a button-tastic week, E-Learning Heroes!
\n
New to E-Learning Challenges?
\n
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.
","kudosSumWeight":0,"postTime":"2015-06-26T07:10:25.000-07:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2MzgwaTRBRThDQzMxNTRCRDI3REE?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2NDkyaTQ3RkU2MzQyQUFERjVDRTg?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDM","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTUwNTY0aTczN0E2QjVCODk5OEM4ODI?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDQ","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTQyNDg4aUMwRDI1ODA4OUY2Mzk4REY?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDU","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTExNDA5aTlDMjBGN0ZDNTk5NjhBRDM?revision=1\"}"}}],"totalCount":5,"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"attachments":{"__typename":"AttachmentConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"tags":{"__typename":"TagConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"TagEdge","cursor":"MjUuMnwyLjF8b3wxMHxfTlZffDE","node":{"__typename":"Tag","id":"tag:E-Learning Challenge","text":"E-Learning Challenge","time":"2015-11-11T20:02:32.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}}]},"timeToRead":2,"rawTeaser":"","introduction":"","coverImage":null,"coverImageProperties":{"__typename":"CoverImageProperties","style":"STANDARD","titlePosition":"BOTTOM","altText":""},"currentRevision":{"__ref":"Revision:revision:1094061_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":110},"visibilityScope":"PUBLIC","canonicalUrl":null,"seoTitle":null,"seoDescription":null,"placeholder":false,"originalMessageForPlaceholder":null,"contributors":{"__typename":"UserConnection","edges":[]},"nonCoAuthorContributors":{"__typename":"UserConnection","edges":[]},"coAuthors":{"__typename":"UserConnection","edges":[]},"blogMessagePolicies":{"__typename":"BlogMessagePolicies","canDoAuthoringActionsOnBlog":{"__typename":"PolicyResult","failureReason":{"__typename":"FailureReason","message":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","key":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","args":[]}}},"archivalData":null,"customFields":[],"revisions({\"constraints\":{\"isPublished\":{\"eq\":true}},\"first\":1})":{"__typename":"RevisionConnection","totalCount":1}},"Conversation:conversation:1094061":{"__typename":"Conversation","id":"conversation:1094061","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1094061"},"lastPostingActivityTime":"2017-12-05T08:39:48.000-08:00","lastPostTime":"2017-12-05T08:39:48.000-08:00","unreadReplyCount":271,"isSubscribed":false},"ModerationData:moderation_data:1094061":{"__typename":"ModerationData","id":"moderation_data:1094061","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2MzgwaTRBRThDQzMxNTRCRDI3REE?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2MzgwaTRBRThDQzMxNTRCRDI3REE?revision=1","title":"uploads_rte_ztuejnyo_Creative-Button-Styles-and-Effects-in-E-Learning.png","associationType":"BODY","width":760,"height":380,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2NDkyaTQ3RkU2MzQyQUFERjVDRTg?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTM2NDkyaTQ3RkU2MzQyQUFERjVDRTg?revision=1","title":"uploads_rte_nhlpjiez_simple-icon-hovers.png","associationType":"BODY","width":760,"height":278,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTUwNTY0aTczN0E2QjVCODk5OEM4ODI?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTUwNTY0aTczN0E2QjVCODk5OEM4ODI?revision=1","title":"uploads_rte_rikxywst_creative-button-styles.jpg","associationType":"BODY","width":760,"height":328,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTQyNDg4aUMwRDI1ODA4OUY2Mzk4REY?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTQyNDg4aUMwRDI1ODA4OUY2Mzk4REY?revision=1","title":"uploads_rte_yzdorptj_hover-animation-button-effects.png","associationType":"BODY","width":760,"height":237,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTExNDA5aTlDMjBGN0ZDNTk5NjhBRDM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDk0MDYxLTExNDA5aTlDMjBGN0ZDNTk5NjhBRDM?revision=1","title":"uploads_rte_nokvtihw_audio-soundboards-elearning.png","associationType":"BODY","width":760,"height":380,"altText":null},"Revision:revision:1094061_1":{"__typename":"Revision","id":"revision:1094061_1","lastEditTime":"2015-06-26T07:10:25.000-07:00"},"BlogReplyMessage:message:1094146":{"__typename":"BlogReplyMessage","id":"message:1094146","conversation":{"__ref":"Conversation:conversation:1094061"},"author":{"__ref":"User:user:536451"},"revisionNum":1,"uid":1094146,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: Animated Button Styles and Hover Effects in E-Learning #89","readOnly":true,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1094146"},"parent":{"__ref":"BlogReplyMessage:message:1094127"},"body":"This time I come up with something different and I think, will be relevant to this challenge.
We (instructional designers) never start our day without having a sip of coffee. So, I come up with an idea to design a coffee maker and use buttons that will help you to choose \"Mocha, Latte or Cappuccino\". These buttons will also help you to know the status of your coffee.
Have a look and give me your valuable feedback.
http://bit.ly/1CBXSjc ","body@stringLength":"611","rawBody":"This time I come up with something different and I think, will be relevant to this challenge.
We (instructional designers) never start our day without having a sip of coffee. So, I come up with an idea to design a coffee maker and use buttons that will help you to choose \"Mocha, Latte or Cappuccino\". These buttons will also help you to know the status of your coffee.
Have a look and give me your valuable feedback.
http://bit.ly/1CBXSjc ","author":{"__ref":"User:user:1092110"},"postTime":"2015-06-28T01:45:15.000-07:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":4},"Revision:revision:1094146_1":{"__typename":"Revision","id":"revision:1094146_1","lastEditTime":"2015-06-28T21:23:10.000-07:00"},"QueryVariables:ReplyList:message:1094146:1":{"__typename":"QueryVariables","id":"ReplyList:message:1094146:1","value":{"id":"message:1094146","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1743727536729","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1743727536729","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1743727536729","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1743727536729","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1743727536729","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1743727536729","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1743727536729":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1743727536729","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"animated-button-styles-and-hover-effects-in-e-learning-89","messageId":"1094061","replyId":"1094146"},"buildId":"Btkyb7T6TeYM9D2gUmiOv","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.2.0","openTelemetryUniverse":"prod","openTelemetryCollector":"http://localhost:4318","openTelemetryRouteChangeAllowedTime":"5000","apolloDevToolsEnabled":false,"inboxMuteWipFeatureEnabled":false},"isFallback":false,"isExperimentalCompile":false,"dynamicIds":["./components/customComponent/CustomComponent/CustomComponent.tsx","./components/community/Navbar/NavbarWidget.tsx","./components/community/Breadcrumb/BreadcrumbWidget.tsx","./components/blogs/BlogArticleWidget/BlogArticleWidget.tsx","./components/messages/MessageView/MessageViewStandard/MessageViewStandard.tsx","./components/customComponent/CustomComponentContent/TemplateContent.tsx","../shared/client/components/common/List/UnwrappedList/UnwrappedList.tsx","./components/tags/TagView/TagView.tsx","./components/tags/TagView/TagViewChip/TagViewChip.tsx"],"appGip":true,"scriptLoader":[]}