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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 120

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

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

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>