Morph A Button Into A Form Using CSS3 Animations

Preview:

Description:

An awesome UI concept that morphs a button into an HTML form using CSS3 animations.

The goal of this project is to provide a better user experience during user registration.

How to use it:

Load the needed JavaScript nad Stylesheet in the document.

<link rel="stylesheet" type="text/css" href="style.css">
<script src="transition.js"></script>

Create the HTML for the registration form.

div id="registerForm">
  <form>
    <input type="button" id="email" class="fake-button button" value="Register" readonly="true" role="button" aria-label="register" onclick="registerClick()" /><br />
    <input type="password" id="password" class="password input" aria-hidden="true" role="textbox" aria-label="password" placeholder="Password..." /><br />
    <input type="button" id="submit" class="button" value="Register" aria-hidden="true" aria-label="submit" onclick="submitForm()" />
  </form>
</div>

See it in action: