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.

From our sponsor: Grow sales by using the smart tools in our all-in-one Marketing Platform. Try it for free.

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.



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).




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!

Tagged with:

Mary Lou

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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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 learning CSS now.

Feedback 137

Comments are closed.
  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??

    • 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. 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


  3. 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. 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 ?

  5. 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 :

    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.

    • You could try this:

      [] '.morph-button' )).forEach( function(el) {
      	new UIMorphingButton( el, {
      		closeEl : '.icon-close',
      		onBeforeOpen : function() {
      			// don't allow to scroll
      		onAfterOpen : function() {
      			// can scroll again
      			// 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
      		onAfterClose : function() {
      			// can scroll again
      	} );
    • Hi Optus,
      I’ve the same issue of yours,
      did you solve the problem?
      If it so, could you share the solution?
      Thank you very much!

  6. 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. 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. 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. 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. 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).



  11. 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. 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

  13. Hi

    Nice work here!

    Just a bit problem with the “close” button. Its all working fine with desktop & tablet. But not with smartphone especially Samsung. Can someone help me to solve this?

    Really appreciate it!!

  14. Hi,

    I have the same question as Nick. Has anyone found a way to enable multiple buttons on the same page for demo 3 (info overlay button ) ?

  15. Very nice piece of art! But I’m suffering to implement some jquery Scrollbar inside the morph-content.

    I’m using the mCustomScrollbar, and i know i need to use this $(selector).mCustomScrollbar("update");, but i dont know where i need to put this to update my scroll inside the morph-content when opened. Can anyone help me?

  16. Hi…
    Fantastic button effect…

    i’ve build a joomla menu modul with the multi push menu with 3dtransform content effect and the morph button integrated in the menu link login…

    take a look at the content isn’ finished yet and the responsive design isn’t implemented (coming soon) but the menu works fine 😉

    thank you for the great demo…