How To Create Morphed Login Button

Looking to create a login button morphed style? Follow the instructions below.

Step-by-step guide

  1. First of all we need to create morphing content. 
  2. To create morphing content visit 'Morph Content' page and click on 'Add New' button.  
  3. Now we need to add our login form. I have used a free plugin 'Show Login Form Anywhere' for this purpose. You are free to use any plugin. Now add this short code '[loginform redirect=""]' in content area to display our login form. After that save the content by clicking 'Publish' or 'Update' button.
  4. We have our login form ready so now we need to configure our button. Once you have created a button using Buttons X move over to 'Morphing' tab and enable button morphing.

  5. Now we need to configure some general settings for our modal window (morphed button). So let's click the general tab and open up the settings. Under 'Morph Content' select the morph content  page you created in step 3 above. I named it as 'Login' so I will select 'Login'. Then you need to define the width and height of the modal window. By default width and height are considered as percentage values in respect to the user's screen size. Add 40 as value for both 'Morph Width' and 'Morph Height' input fields. 40 means the modal will cover 40% of user's screen. By default the button background colour is used for modal background. You can select a different background if required.

  6. Now just save the button and place the button short code wherever you want this button to appear. That's it!

 

Animations for mobiles and tablets are disabled in order to have consistent behaviour across all devices.