{"id":1031,"date":"2015-07-02T14:42:26","date_gmt":"2015-07-02T17:42:26","guid":{"rendered":"http:\/\/ashleychiasson.com\/blog\/?p=1031"},"modified":"2015-07-02T14:42:26","modified_gmt":"2015-07-02T17:42:26","slug":"e-learning-challenge-89-creative-button-styles-and-effects-in-e-learning","status":"publish","type":"post","link":"https:\/\/ashleychiasson.com\/blog\/e-learning-challenge-89-creative-button-styles-and-effects-in-e-learning\/","title":{"rendered":"E-Learning Challenge #89 – Creative Button Styles and Effects in E-Learning"},"content":{"rendered":"

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.<\/p>\n

The Concept<\/strong><\/p>\n

This week’s challenge<\/a> was an easy one: have fun with buttons and adding creative effects – FUN! Thanks, David!<\/p>\n

The Method<\/strong><\/p>\n

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!<\/p>\n

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.<\/p>\n

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.<\/p>\n

The Result<\/strong><\/p>\n

\"Screen<\/a><\/p>\n

You can view the full interaction by Clicking Here<\/a>.<\/p>\n

If you’re wondering how I did this, you can download the Storyline 2 file by Clicking Here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[3],"tags":[10],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4s3cq-gD","_links":{"self":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":1,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1033,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions\/1033"}],"wp:attachment":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}