From our sponsor: Elevate all your marketing with Mailchimp Smarts.
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!
here is the joomla 3 modul integrated multi-pushmenu with 3d-transform and the morphing button for login/out – on github:
https://github.com/HyperKat/ws-navigator_0.5
Great work Mary, and everyone at Tympanus! I like all the examples on this website and it is very inspiring to see some fresh ideas that make websites more user friendly. I look forward to working with developers on improving my own websites with the code examples provided! -Samm
You ‘ve been great inspiration.
About modals that contain buttons (submit, subscribe, etc.):
The modal can be closed automatically, right after the button is clicked or after 3 secs – assuming that a success/information message will be displayed in the meanwhile. We also want to keep the default functionality of Close-Icon.
To do so, go to uiMorphingButton.js and add some code to UIMorphingButton.prototype._initEvents function.
This is how it looks like mine..
CASE 1
________________________________________________________
CASE 2
Thanx!
I am LOVING this, y’all! I only have one thing I can’t get to work…
I’ve got multiple buttons on a page opening Info Overlays, but only the first one will scroll the overlay. Any idea why?
Here’s the page…
http://edenknowsimplants.com/jenny-edens-recovery-kit/
Anyone? 🙂
Hi, I seen you have solved this problem. Could you give tips how to proceed.
Thanks, MIchael
Can you please let us know how you fixed the problem?
I ran into the same bug.
Thanks for sharing.
Hi Jenny,
Can you show us how you used multiple overlays?Thanks!
-Jean
The solution is in an earlier comment: http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/comment-page-2/#comment-459766
some guy is selling this on envato when you did all the hard work. i understand the open source concept, but he didn’t even have the decency to really change up his demo page. on a good note, at least people love what you create enough to steal it haha
http://codecanyon.net/item/transitioning-buttons/11916142
Thanks Chris!
Hello, I have 3 buttons, first button (basic) isnt morph, others 2 are.
I want when user click the first button if(someval) second morph button to be in action else if(someVAl) third morph button is in action.
I mean 1 basic not morph button and second and third morphhs buttons.
How to do that ?
Chris, as closing the direct modal in console?
Thanks Chris!
as I run the icon-close button from the console?
Hello,
thank you for his great plugin, it works quite well apart for some issues in IE, but I am wondering, if there is a function that closes the morph box after an contact form has been used inside that div.morph-content ?
I went through the source and found when it fires up, but I could not make it work properly.
Other option would be to make it disappear once someone clicks outside of the box?
Can anybody help with this please?
Thanks a lot,
Josef
Hi all,
I’m new to this awesome website and I’m blown away! I downloaded the source code, but when i open the html files it does look the same. How would I be able to use this on my website?
Nice work…the other day I was searching for some script ideas and I´ve found this one that has the same concept…have a look:
http://www.thepetedesign.com/demos/adaptive-modal_demo.html
Take care.
Is there an easy way to pause or stop youtube and vimeo videos after the modal window has been closed?
Thanks
Hey, Thank you for this button. But i have problem in video player. Is it possible to make more than 1 button?
I really like this button design, but after downloading it to implement it on a wordpress site, I tried uploading it as a plugin and it failed. How do I add it to my site? Can anyone offer advice to a beginner?
Really like the first morph button that opens up a dialog box, but I am running a problem. When the box is open any key stroke automatically closes the box. So typing out the email to login is impossible. Any clue as to why this may happen? This is happening across the board on all browsers.
Is there any way to record people clicking on these buttons? Such as before a shopping cart, to ensure compliance?
Mary–
You are brilliant! Thank you so much for sharing these!
hello all and would like to know how to insert the jquery wow.animation within the page within the button .
otimo jquery parabens
Hello, is it possible to get the first input item with the cursor? I’ve tried ‘autofocus’ but dose’t work … Thanks