Two call-to-action buttons that give context to your modals in a Material Design fashion.

The Structure

The HTML is fairly simple. We have the two buttons wrapped inside <div class="buttons-ctn">. And the inner content for each button that gets shown when the button expands to a modal, is placed just outside of the container for the buttons.


The buttons are floated to the left so their side by side with no gap in-between. The modal content is positioned in the center of the container and is hidden. We reveal the modal content by adding the class .button__content--active with jQuery. A few key things to note are the z-index values. The modal content must be given a higher z-index than the buttons so it doesn’t get placed behind the background of the buttons.


Here is where most of the magic lies. When a button is clicked, we find out which button was selected, and which one wasn’t, and move them both into the center of the screen by subtracting their offset().left value and .innerWidth() / 2 from half of the window width. It sounds more complicated than it is. We give the ‘unselected’ button a transition-delay so it moves to the center slightly after the first button.

When that transition is complete we transform the scale value of the selected button to match the size of the inner content of that modal. We do this by dividing the .innerWidth() of the content by the .innerWidth() of the button. This value is what we use as the transform: scale(x) value; we do the same for the height and use that as the transform: scale(y) value.