in Playground
137 Comments

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

View demo Download source

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!

Find this project on Github

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

TooltipAnimations

Playful Little Tooltip Ideas

ShapeOverlays

Dynamic Shape Overlays with SVG

AnimatedFrameSlideshow_Featured

Animated SVG Frame Slideshow

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+

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

Leave a comment
  2. 2

    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

    Reply
  3. 3

    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

    UIMorphingButton.prototype._initEvents = function() {
    var self = this;
    // open
    this.button.addEventListener(‘click’, function() {
    self.toggle();
    });

    // close
    if (this.options.closeEl !== ”) {
    var closeEl = this.el.querySelector(this.options.closeEl);

    if (closeEl) {
    closeEl.addEventListener(‘click’, function() {
    self.toggle();
    });
    }
    }
    //Here is the addition.
    //If you have a submit button give it an id in the html code.
    //like this:
    //and the following code will make the modal close 2 secs after you click the button
    var sbId = this.el.querySelector(‘#submit_button_id’);
    if (sbId) {
    sbId.addEventListener( ‘click’, function() {
    setTimeout(function() {
    self.toggle();
    }, 2000);
    } );
    }
    };

    ________________________________________________________

    CASE 2

    UIMorphingButton.prototype._initEvents = function() {
    var self = this;
    // open
    this.button.addEventListener(‘click’, function() {
    self.toggle();
    });

    // close
    if (this.options.closeEl !== ”) {
    var closeEl = this.el.querySelector(this.options.closeEl);

    if (closeEl) {
    closeEl.addEventListener(‘click’, function() {
    self.toggle();
    });
    }
    }
    //Here is the addition.
    //I have again a submit button, I will give it an id in the html code.
    //like this:
    //I also have an in-modal success message being displayed when the form submission is successful.
    //The success message is written in a div that waits with diplay:none. When the form is submitted successfully, the div gets diplay:block.
    //the div has id=”success”
    //and the following code does: after the button is clicked, we take a look if the is displayed.
    //If it is, then the modal will close automatically after 4 secs.
    var sbId = this.el.querySelector(‘#submit_button_id’);
    if (sbId) {
    sbId.addEventListener( ‘click’, function() {
    setTimeout(function() {
    var isVisible = $(‘#success’).is(‘:visible’);
    if (isVisible){self.toggle();}
    }, 4000);
    } );
    }
    };

    Thanx!

    Reply
  6. 12

    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 ?

    Reply
    • 15

      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

  9. 16

    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?

    Reply
  12. 19

    Hey, Thank you for this button. But i have problem in video player. Is it possible to make more than 1 button?

    Reply
  13. 20

    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?

    Reply
  14. 21

    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.

    Reply
  15. 22

    Is there any way to record people clicking on these buttons? Such as before a shopping cart, to ensure compliance?

    Reply
  17. 24

    hello all and would like to know how to insert the jquery wow.animation within the page within the button .
    otimo jquery parabens

    Reply
  18. 25

    Hello, is it possible to get the first input item with the cursor? I’ve tried ‘autofocus’ but dose’t work … Thanks

    Reply

Follow this discussion

Leave a Comment