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 102

  1. 1

    Hi Lovely Demo.

    Unfortunately even after using the modernizr.custom.js file via bundle config in Vis Studio, the modal has problems in IE 11 and earlier. The cursor cant seem to detect input fields for a login form I have placed in the modal content? Help anyone??

    • 2

      It’s unlikely this is a result of something in the demo. Post the issue to StackOverflow or CodeMentor with the code in question to get some good feedback.

      Don’t forget to reply here with a link to the question on those (or other) site(s); I might be able to help.

  2. 3

    Hi Mary Lou,

    Been following your works for a while….well done for all these! :) Very creative lady…. :)

    I’ve got a question, if I use number 3 (info overlay)…. when I click on the “x” to close it, would it be possible to clear an # tag with it at the same time?

    I’ve got a button which scrolls down to an A name tag, but after clicking on close, it stays there, and when I open the info overlay again, it straight goes back to A name tag…. I hope it makes sense…. :)

    Let me know if you could help, thank you

    Peter

  3. 6

    I am using pedro’s code to add two ‘more info’ buttons, but it is not working. As soon as I change the script after scrollfn() with the one mentioned in the comment, both buttons stop working.

  4. 7

    Compliments, it’s exceptional.
    It work very well on desktop, and tablet, but not in smartphone, when i click close button nothing happen.
    Can u help me ?
    -tnku

  5. 8

    Hi,

    First of all thank you for this website, and especially this concept !
    I’m french, and my english is very bad, so excuse me in advance. I’ll try to be as clear as possible.

    I’m using the “index3″ of your demo, the “FullScreen Overlay”, and my problem is that i’m trying to display a a grid of element,
    kind of like masonry.
    But when i duplicate the “.morph-button” the first one works but the other won’t work, i’m guessing that this is because of the “var el”, but i’m not sure.

    To be honest with you, JS is not my strongest suit for now, i’m working on it !

    Here is an example :
    http://codepen.io/anon/pen/rvBsc

    If anyone have an idea, it will be great,
    and again, if i wasn’t clear enough do not hesitate and scream at me :p
    Thanks in advance.

    • 9

      You could try this:

      [].slice.call(document.querySelectorAll( '.morph-button' )).forEach( function(el) {
      	new UIMorphingButton( el, {
      		closeEl : '.icon-close',
      		onBeforeOpen : function() {
      			// don't allow to scroll
      			noScroll();
      		},
      		onAfterOpen : function() {
      			// can scroll again
      			canScroll();
      			// add class "noscroll" to body
      			classie.addClass( document.body, 'noscroll' );
      			// add scroll class to main el
      			classie.addClass( el, 'scroll' );
      		},
      		onBeforeClose : function() {
      			// remove class "noscroll" to body
      			classie.removeClass( document.body, 'noscroll' );
      			// remove scroll class from main el
      			classie.removeClass( el, 'scroll' );
      			// don't allow to scroll
      			noScroll();
      		},
      		onAfterClose : function() {
      			// can scroll again
      			canScroll();
      		}
      	} );
      });
      
  6. 10

    Pedro, thank you !!

    I just saw your answer and it is just perfect !
    You’ve just make my day.

    And don’t get the line that you wrote,
    i understood that the JS will react on each interaction with any of the elements that are named “.morph-button”.

    I’ll look that up tomorrow.

    Thank you for your reactivity.

    Optus Warhole.

  7. 11

    Hello again. In my last comment I forgot to mention. Removing overflow-y: scroll and html{overflow: hidden;} worked for me, but do you think this would cause some others issues, e.g. on touch devices?

  8. 12

    hi.. wonderful tutorial as usual . i want to add the info overlay effect to my site but don’t want the button clicking option, instead i want to make certain text clickable and the overlay effect to happen. Please can someone help me with this ? thanks you.

  9. 13

    Hi there,

    Thanks for this great code but when I want to use Morphing Buttons, I could only add one to my HTML page. I want to use 6 with different content, but when I add all the classes only the first button will show the content.

    Please help!

    Thanks in advance.

  10. 14

    Hi guys,

    I want to call the .toggle function in a in another file (so not on the default onClick). Can you please help me out with this?

    I tried a few different things, one of them is calling UIMorphingButton.prototype.toggle(); but this results in the error ‘ Uncaught TypeError: Cannot read property ‘classList’ of undefined ‘ (something in the classie.js file).

    Thanks,

    Steve

  11. 15

    Great script.

    Need help trying to run 2 close buttons within example # 3, info overlay.

    Anyone know what code I can add or where I can find the line that affects that area?

    thanks xo

  12. 16

    Hi. I’m wanting to do something like this for my site. A sort of full screen modal for things that need more info. So a word in a sentence would be slightly different in colour signifying its has a modal window linked. When people click the word the animation happens, filling the screen with a modal window with a more in depth description. Can this be done? My site is built on WordPress. Can anyone help me out i really like the look of the full screen window but not sure how to do it? i have some coding skills but obviously this is a bit too much for me.

    I appreciate any help you can give me

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>