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

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!

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.

http://www.codrops.com

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. Hey I have posted a comment but I think it is removed or not posted, I am newbee here and was looking on this excellent example but my curiosity is if I want to add more 2-3 buttons to the third example of INFO OVERLAY then how should i manage it can I get such example, it would be really helpful to me. thanks in advance. please PM me

  2. Hey Mary, great and inspiring article. How did you make the white colored scrollers?

  3. I like all the morphing effects. But could you try instead of rectangle why can’t you try the circle transformation to a square or rectangle.

  4. Very nice and resourceful thanks for sharing. But how can the overlay or popup be closed. Thanks.

  5. Superb Article. I love to use this in my site. Thanks a lot for such a appriciate work.

  6. Great work, Mary Lou.

    @impulse already asked, but I’m also curious – is there a quick way to change this section:

    // the button
    this.button = this.el.querySelector( 'button' );
    // state
    this.expanded = false;
    // content el
    this.contentEl = this.el.querySelector( '.morph-content' );
    // init events
    this._initEvents();

    to allow for multiple elements and overlays with the Info Overlay concept?

    sorry if i’m way off mark.

  7. Beautiful, inspiring, useful …..like everything you do.
    Many Thanks Mary Lou

  8. this is great but I’m having the same issue as a few other people. I can’t get more than one instance of the third transition to work on a page

    • Hi Joseph. First, create another morph button:

      
      ...
      <div class="morph-button morph-button-overlay morph-button-fixed">
      	<button type="button">Other Info</button>
      	<div class="morph-content">
      		<div>
      			<div class="content-style-overlay">
      				<span class="icon icon-close">Close the overlay</span>
      				<h2>About Coriander</h2>
      				<p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info.</p>
      				<p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info.</p>
      			</div>
      		</div>
      	</div>
      </div>
      ...
      
      

      Then change the script to:

      ...
      scrollFn();
      				
      [].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
      	new UIMorphingButton( bttn, {
      		closeEl : '.icon-close',
      		onBeforeOpen : function() {
      			noScroll();
      		},
      		onAfterOpen : function() {
      			canScroll();
      			classie.addClass( document.body, 'noscroll' );
      			classie.addClass( bttn, 'scroll' );
      		},
      		onBeforeClose : function() {
      			classie.removeClass( document.body, 'noscroll' );
      			classie.removeClass( bttn, 'scroll' );
      			noScroll();
      		},
      		onAfterClose : function() {
      			canScroll();
      		}
      	} );
      } );
      ...
      
      

      Hope it helps.

  9. Excellent job on creating this beautiful work! But I wondered as a beginner how can I actually make the video player play videos instead of showing a mock up? Can someone tell me the code to achieve that please?

  10. Wow! Appreciated… guys. It worked intelligently on all the browsers . But Just one issue in IE9 getting error.

    [code]

    Line: 90
    Error: Unable to get property ‘target’ of undefined or null reference

    [/code]

    Can you please help to resolve it. Thanks a lot.

  11. There seems to be an issue with the side bar when your screen is 400px wide, the side bar content breaks in google chrome. min-height:100%; should fix this issue I tried this in the developer mode.

    • Hi Jordan, thanks for your feedback! There was a bad media query that restricted the height. It’s fixed now, thanks for letting us know! Cheers, ML

  12. I am using Windows IE9 (1920×1080) and getting this error in uiMorphingButton_fixed.js
    ….
    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…

  13. Hi Mary,

    I am also getting this error in uiMorphingButton_fixed.js at line 90 (Unable to get property ‘target’ of undefined or null reference) can be resolved? when i see the third example in ie9 and nothing works… Please take a look into it, Anybody Guys! help appreciated…

  14. hi,

    can someone help me here. Its a simple question. I really like the login/sighup section and was trialing it out. So in the form tag, i placed my action=”process.php” and method=”post”, but when i click on the Login button, nothing happens. I even placed a input button and still no success.

    Can someone tell me how to pass the field data (email and password) to the process.php file in the login form. without that, i really cant do anything at the moment.

    Someone please assist.

    • Remove the following lines in the index.html:

      // for demo purposes only
      [].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) {
      bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
      } );

      Cheers

  15. Thanks Pedro for your help. Its worked. Much appreciated.

    And Thanks Mary for this lovely form.