From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
Any modal that doesn’t disappear when any area outside of the modal is clicked is a piece of terrible UI. Cool opening effect, but not worth using unless that functionality is implemented.
https://github.com/codrops/ButtonComponentMorph/
Ryan, Codrops only ever provides a proof-of-concept. They release a lot of innovative and cutting-edge demos (for free) that greatly help the community.
To address your issue, canceling a modal via any outside click is extremely simple to implement. IN fact, past Codrop demos have included this as well. Just search the site for “modal” and you’ll find what you’re looking for.
Wow. Somebody needs a hug. Your message is correct, but you need to work on the delivery.
Yeah, it’s easy with $(document).mouseup(function(e) {}
If we’re going to nitpick, any modal that does dissapear when an area outside the modal is clicked, is not really a modal.
I know how to do it; that’s not the point. The point is that implementing that functionality would take an insignificant amount of time when compared with the time it took to create the rest of it. “Proof of concept” is no excuse for not taking an extra 60 seconds.
https://github.com/codrops/ButtonComponentMorph/ If you can do it, and if it takes you only 60 seconds to transform such a terrible UI into a nice one, why don’t you contribute? There’s no excuse not to..
Awesome stuff as always. Thanks for sharing it with us 🙂
Hi,
What you’ve done they are superb. Especially this is one of them… I covet at your works.
Best regards.
Another great stuff, many thanks Mary for sharing!
Best Regards
Maurizio
Great job, only thing I would add is a tiny piece of js to close the modal when clicking outside of it.
A new trend maybe?
I have a plan for this code; i will implement this my next project, Just Innovative & UI !!
Thanks everybody! We’ve updated the demos and ZIP file… we had to solve a bug in Safari! Thanks again, cheers, ML
I really liked this demo. Great job.
WOW just wow, really I love this, and ofc I will implement this in future projects 😀 Thanks for sharing.
Manoela ti si zakon ove profesije :))…
Mary you’re the law of this profession :)) …
Congratulations on this great example. But would appreciate if some day explain how to solve the problems ie almost all the examples I try to run on you and keep enlightening.
As usual 🙂 Mary Lou u doing a great job . thanks for this amazing stuff *appreciate*
Wow! I love it! Thanks for the inspiration.
Very cool concept!
The close buttons don’t work for me (Chrome Version 34.0.1847.131 m) in any of the button-demo examples.
This is cool and neat thanks for sharing
What can I say about your work? Awesome as always and it gets awesome-r every time. 🙂
I am really inspired by you 🙂
I l-o-v-e this concept!
The only question is about sidebar demo – tried it on Nexus 4 in Chrome and Boat browsers, it doesn’t seem to work properly.
Thanks Dmitry! A bad media query was causing this… it’s fixed now! Let me know if you can see it working now 🙂 Thanks a lot again, cheers, ML
Nice work. Elastic reveal modal 🙂
Hi just a query for the third one INFO OVERLAY section, If i have more than 3-4 buttons then how to implement this can i get an example of that as i am newbee.
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
Hi, please see Pedro´s comment here. Cheers, ML.
Close button doesnt work
I have the same problem when I’m looking at the demo.
Same problem…. close button doesn’t work. Please help
Wow. Truly love how these are looking.
Hey Mary, great and inspiring article. How did you make the white colored scrollers?
Sickkk transitions!
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.
Very nice and resourceful thanks for sharing. But how can the overlay or popup be closed. Thanks.
Very nice work, good luck.
Superb Article. I love to use this in my site. Thanks a lot for such a appriciate work.
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.
Thanks! Please see Pedro´s comment here. Cheers, ML
Beautiful, inspiring, useful …..like everything you do.
Many Thanks Mary Lou
What a great idea – thanks for posting!
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:
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.
That works perfectly, thank you so much Pedro!
thanks pedro, big help.
Is close button working on the second button?
which part of the script do i change? may seem like a dumb question… haha
Can someone please tell me which part of the script I change? Thank you for your help Pedro.
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?
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.
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
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…
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…
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
Thanks Pedro for your help. Its worked. Much appreciated.
And Thanks Mary for this lovely form.
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 🙂
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…
Here you go https://github.com/codrops/ButtonComponentMorph/issues/1#issuecomment-43989467
I’m unable to test in IE9, so anyone with IE9 may handle the problem.
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!
@impulse
I have the same problem as you
@impulse
I found what was the problem. Try to replace your modernizr.custom.js with the same java script on
https://github.com/codrops/ButtonComponentMorph/tree/master/js
I think its the problem with custom modernizr builds
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 🙂
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.
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.
I love the idea, but I wonder about accessibility, has anyone tried this using keyboard navigation and a screenreader?
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.