Morphing Buttons Concept

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

MorphingButtons

View demo Download source

Today we want to share a bit of inspiration for a morphing button concept. You have surely come across this concept already: the idea is to use an element of action, like a button, and morph it into something else when clicked. Basically, the action element is being “reused” visually to reveal some other content. This can be a fullscreen overlay, a modal window, an expanding share button, and so on.

Please note that this is for inspiration purposes only! Most of the content and functionality is made up of dummies and we are only supporting modern browsers.

MorphingButtons01

MorphingButtons02

The way we morph a button in, for example, a fullscreen overlay is the following: we have a main button wrapper that contains a button element and a division for the expanded content. While the wrapper and button element are initially visible, the division for the expanded content will only appear once we click on the button. That division has fixed positioning, allowing us to break it away from the flow. We position it on top of the real button and cross-fade them, making it look as if the button itself is moving away from its context and flying out. With some adjusted transitions and transition delays, we fade in the inner content once we’ve expanded the morphing element.

In the other examples, we do some other things to the inner content, like scale them up or slide them in — there are many possibilities here. Another additionally interesting thing to do is to move an element from the button with the expanding division, and reusing it as a title, or, like shown in the video player example, as a control element. For some cases it might not be needed to close the morphed element again, like for example, the share button (once social sharing scripts are loaded, for example).

MorphingButtons03

MorphingButtons04

MorphingButtons05

In the last example, we have a little issue with FF: the transition for the content seems to break for some reason…

Morphing the action element into the actual component that will allow to perform the action, is an interesting concept and surely allows for many diverse use cases. There is something attractive to it but note that the action element “disappears” from the flow. When working with overlays, this might not be a big issue, but there might be cases that benefit from having the action element present in the UI. What are your thoughts on this? Do you think it’s an interesting interaction?

We hope you enjoyed this little concept and get inspired!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 136

Comments are closed.
  1. 1

    Any modal that doesn’t disappear when any area outside of the modal is clicked is a piece of terrible UI. Cool opening effect, but not worth using unless that functionality is implemented.

    • 3

      Ryan, Codrops only ever provides a proof-of-concept. They release a lot of innovative and cutting-edge demos (for free) that greatly help the community.
      To address your issue, canceling a modal via any outside click is extremely simple to implement. IN fact, past Codrop demos have included this as well. Just search the site for “modal” and you’ll find what you’re looking for.

    • 4

      Wow. Somebody needs a hug. Your message is correct, but you need to work on the delivery.

    • 6

      If we’re going to nitpick, any modal that does dissapear when an area outside the modal is clicked, is not really a modal.

    • 7

      I know how to do it; that’s not the point. The point is that implementing that functionality would take an insignificant amount of time when compared with the time it took to create the rest of it. “Proof of concept” is no excuse for not taking an extra 60 seconds.

  2. 10

    Hi,

    What you’ve done they are superb. Especially this is one of them… I covet at your works.

    Best regards.

  3. 11

    Another great stuff, many thanks Mary for sharing!
    Best Regards
    Maurizio

  4. 12

    Great job, only thing I would add is a tiny piece of js to close the modal when clicking outside of it.

  5. 14

    I have a plan for this code; i will implement this my next project, Just Innovative & UI !!

  6. 15

    Thanks everybody! We’ve updated the demos and ZIP file… we had to solve a bug in Safari! Thanks again, cheers, ML

  7. 17

    WOW just wow, really I love this, and ofc I will implement this in future projects :D Thanks for sharing.

  8. 18

    Manoela ti si zakon ove profesije :))…
    Mary you’re the law of this profession :)) …

  9. 19

    Congratulations on this great example. But would appreciate if some day explain how to solve the problems ie almost all the examples I try to run on you and keep enlightening.

  10. 20

    As usual :) Mary Lou u doing a great job . thanks for this amazing stuff *appreciate*

  11. 22

    Very cool concept!

    The close buttons don’t work for me (Chrome Version 34.0.1847.131 m) in any of the button-demo examples.

  12. 24

    What can I say about your work? Awesome as always and it gets awesome-r every time. :)
    I am really inspired by you :)

  13. 25

    I l-o-v-e this concept!

    The only question is about sidebar demo – tried it on Nexus 4 in Chrome and Boat browsers, it doesn’t seem to work properly.

    • 26

      Thanks Dmitry! A bad media query was causing this… it’s fixed now! Let me know if you can see it working now :) Thanks a lot again, cheers, ML

  14. 28

    Hi just a query for the third one INFO OVERLAY section, If i have more than 3-4 buttons then how to implement this can i get an example of that as i am newbee.

Comments are closed.