"Animated Search Box"
Bootstrap 3.3.0 Snippet by Qamarabbas

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="search-box"> <input class="search-txt" type="text" placeholder="Type to Search" > <a href="" class="search-btn"> <li class="fas fa-search"></li> </a> </div> </body> </html>
body{ margin:0; padding:0; box-sizing: border-box; background: #4cd137; } .search-box{ position: absolute; top:45%; left: 50%; transform: translate(-50%,-50%); background: #00a8ff; height: 50px; border-radius: 40px; padding:10px; } .search-btn{ color: #e84118; outline: none; float:right; width:40px; height:40px; border-radius: 50%; background:#2f3640; display: flex; justify-content: center; align-items: center; text-decoration: none; } .search-txt{ border:none; background:none; outline:none; float:left; padding:0; color:white; font-size:16px; transition:0.4s; line-height: 40px; width: 0px; } .search-box:hover >.search-txt{ width:240px; padding:0 6px; transition:all 0.5s ease-in; } .search-box:hover>.search-btn{ background: white; } ::placeholder{ color:#fbc531; }

Related: See More

Paper Dashboard Pro Angular
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: