Morph A Button Into A Form Using CSS3 Animations

Category: Animation , Form , Javascript , Recommended | January 28, 2019
Author: PaddiM8
Views Total: 640 views
Official Page: Go to website
Last Update: January 28, 2019
License: MIT

Preview:

Morph A Button Into A Form Using CSS3 Animations

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:

morph-button-form

You Might Be Interested In:


One thought on “Morph A Button Into A Form Using CSS3 Animations

Leave a Reply