"Elegant animated search box"
Bootstrap 4.1.1 Snippet by tarun90

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Elegant animated search box</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- Coded with love by Mutiullah Samim--> </head> <body> <div class="container h-100"> <div class="row h-100 justify-content-center align-items-center"> <div class="search_container"> <div class="search"> <input type="text" placeholder="Search..."> <div class="go_btn">Go <i class="fas fa-arrow-right"></i></div> </div> <div class="search_btn search_open"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
html, body{ height: 100%; padding: 0; background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); } .search_container{ position: relative; } .search_btn{ position: absolute; height: 60px; width: 60px; background: #34495e; right: -60px; top:0; bottom: 0; line-height: 60px; text-align: center; cursor: pointer; } .search_open::after{ content: "\f002"; font-family: "Font Awesome 5 Free"; font-size: 25px; font-weight: 700; color: white; } .search_close::after{ content: "\f00d"; font-family: "Font Awesome 5 Free"; font-size: 25px; font-weight: 700; color: white; } .search{ background: #576574; height: 60px; width: 0; display: flex; align-items: center; transition: all 0.6s; } .search_active{ width: 400px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 80px; } .search input{ width: 100%; height: 100%; background: transparent; border:0; color: white; caret:white; } .search input::placeholder{ color: #ecf0f1; } .search input:focus{ border:0; outline: 0; box-shadow: 0; } .search .go_btn{ position: absolute; right: -60px; height: 30px; width: 60px; line-height: 30px; text-align: center; font-size: 18px; font-weight: 600; color: white; background: #e74c3c; transition: all 0.5s; cursor: pointer; } .search_active_go_btn{ right: 10px !important; }
$(function(){ $('.search_btn').on('click',function(){ $(".search_open, .search_close").toggleClass("search_open search_close"); $('.search').toggleClass('search_active'); $('.go_btn').toggleClass('search_active_go_btn'); }); });

Related: See More

Rubik Presentation Page
Elegant Login Page
Elegant Bootstrap 4 message chat box template
Animated Radio tab

Questions / Comments: