How To Create an Animated Search Form

View: 237    Dowload: 0   Comment: 0   Post by: admin   Category: HTML-CSS template   Fields: none

Learn how to create an animated search form with CSS.

Step 1) Add HTML:

 <input type="text" name="search" placeholder="Search.."> 

Step 2) Add CSS:

input[type=text] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
    width: 100%;
}

The end

How To Create an Animated Search Form

How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

Posted on 26-12-2017 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd