Morph A Button Into A Form Using CSS3 Animations

Category: Animation , Form , Javascript , Recommended | January 28, 2019
Views Total:948 views
Official Page:Go to website
Last Update:January 28, 2019


Morph A Button Into A Form Using CSS3 Animations


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">
    <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()" />

See it in action:


You Might Be Interested In:

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

Leave a Reply