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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 78

  1. 1

    Hie Perdo ….excellent work man. I want to ask you that if i want to load that login or signup boxes on body load rather clicking on morhpin button then what should i do … help me :-)

  2. 2

    Hi did anyone resolved this issue?
    ….
    var self = this,
    onEndTransitionFn = function( ev ) {
    if( ev.target !== this ) return false;
    if( support.transitions ) {
    …..
    ===============================================
    Line: 90
    Error: Unable to get property ‘target’ of undefined or null reference
    ===============================================
    Please help to fix this…

  3. 4

    I really like this morphing buttons concept, and it has given me the inspiration to create a site I think will be useful and help me learn about web design, as I am new to it. Like some of the others here, I am also having a problem with multiple instances of a transition. I would like to create multiple instances of transition six, the video player. I tried examining Pedro’s reply dealing with transition three, but did not think it applied to this transition. If anyone could assist me in finding a way to add multiple video buttons I would really appreciate it. Thank-you!

  4. 7

    Thanks Jovan, for the suggestions but I don’t see this solves the issue of
    Line: 90
    Error: Unable to get property ‘target’ of undefined or null reference

    I have replaced with modernizr.custom.js build from github. Can anybody look into this, and resolve the issue of window7 IE9, Window8 IE9 developer mode.

    Thanks, your efforts highly appreciated :)

  5. 8

    This is a fantastic post! Has anyone (any of the readers / author) had a chance to test this approach with end users? I’m curious to see if this is intuitive to them or not.

  6. 9

    I really like the “share this” effect. Except I don’t know how to close it, like login and sign up modal dialog closes.
    Can anyone please tell me.

    Thanks in Advance :-)

    • 10

      There is no need to make CLOSE button for “share this” or any other share, subscribe thing, just because after sharing or subscribing button is pressed (on click) you should program to load new ‘thank you’ page, in which all buttons will be not expanded again.

  7. 11

    I love the idea, but I wonder about accessibility, has anyone tried this using keyboard navigation and a screenreader?

  8. 12

    A very nice post and indeed pretty interesting too. I have one question, can I use it on a website or do I have to take some kind of permission.

  9. 13

    Great stuff. This reminds me of one of the UI improvements from iOS6 to iOS7. When opening a cluster of apps on the homescreen or an individual app, it also transitions nicely by zooming in. Transitions make the experience feel less disruptive, always the better option with regard to user experience (if performance and accessibility don’t suffer).
    Anyway, keep up the good work.
    K.

  10. 15

    Great work! I have noticed a bit of an issue with this demo on a mobile platform, meaning an iPhone. It seems as though the sidebar settings effect makes it so that the iPhone’s normal smooth scrolling doesn’t happen anymore. Now, when I scroll, the page stops as soon as I remove my finger. This doesn’t happen with the other effects and I was wondering what may be causing this (some sort of an overlay?) and what can be done to fix it.

    Thanks again!

  11. 16

    Thank you very much for your job. Can you help me? How can i add video from my channel on you tube using template index 6.
    For earlier thanks!

  12. 17

    WOW amazing work. I loved it. Can I use this one for my website? I always check your website cause I want to learn more. Keep on posting and inspiring us. God Bless!

  13. 18

    Hello!

    I am trying to open the modal from a normal link instead of a button:


    $('#reportAction').addEventListener( 'click', function( ev ) { ev.preventDefault(); } );

    Doesnt work though – any help is much appreciated!

    Thanks!

    Tobias

  14. 19

    Hello everybody,

    I have a really stupid question:
    How do i integrate these buttons into my website (self hosted wordpress). Especially the “Info Overlay” and “Sidebar Settings” I would like to try.

    Would be really nice, if somebody could give a short explanation for a dummy like me. I’m stuck with this :(

    Thanks a lot in advance!!

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>