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: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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. 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. Hi did anyone resolved this issue?
    var self = this,
    onEndTransitionFn = function( ev ) {
    if( !== 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. 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. 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. 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. 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 🙂

    • 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. I love the idea, but I wonder about accessibility, has anyone tried this using keyboard navigation and a screenreader?

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

  10. 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. 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. 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. 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!



    • Yo lo solucione cambiando la linea 51 del Script uiMorphingButton_fixed.js
      de esto:
      this.button = this.el.querySelector( ‘button’ );

      a esto:
      this.button = this.el.querySelector( ‘a’ );

      para que sea un resultado menos general o si tendrás mas de un enlace y evitar conflictos añade una clase
      this.button = this.el.querySelector( ‘’ );

      Ojala no cause conflictos esta modificacion.

  14. 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!!

    • What a pitty!

      Nobody is able or willing to help me or at least to give me any kind of answer :(((

      Sorry for my stupid question!!

    • You can download relevant example and start removing lines of code you feel are unnecessary, checking every time if it still works. This way you will get an absolute minimum that needs to be implemented in your WordPress theme. I can give you a hint that definitely you will need to include these files for interactions: modernizr.custom.js, uiMorphingButton_fixed.js and classie.js + relevant CSS if you want to keep the same styling. Next, dig into your theme’s files and start copy/pasting. I can assure you this is not the best way of doing it (as your WP theme may be already using some JS) but at least it gives you some idea.

  15. Hello, already a big thank you for your excellent work!
    But I do have a problem, I replaced the code of Pedro and it still does not work. Can you help me?

  16. was trying to use the Login or Sighup buttons. there wasnt any problem in desktop. but in mobile device i cant close the form. nothing happens even i tap close icon on the top right. please help