Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
All
Hello
Categories
Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
Popular Sites
Html Free Codes
Html5 Free Codes
Html Best Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About JavaScript Best Codes
Not a member? Sign Up

Hiding Search Box

Written by @kerixa 26 August 2020

It is very important to have a search box in your website. But it might consume some space. So why not to hide it under a button and make it visible when it is needed and the button is clicked? See the example below.

Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&amp;display=swap'>
<style>
.search {
  --background: #ffffff;
  --text-color: #414856;
  --primary-color: #4F29F0;
  --border-radius: 10px;
  --width: 190px;
  --height: 55px;
  background: var(--background);
  width: auto;
  height: var(--height);
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.search input[type="text"] {
  position: relative;
  width: var(--height);
  height: var(--height);
  font: 400 16px 'Varela Round', sans-serif;
  color: var(--text-color);
  border: 0;
  box-sizing: border-box;
  outline: none;
  padding: 0 0 0 40px;
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
}
.search input[type="text"]:focus {
  z-index: 0;
  opacity: 1;
  width: var(--width);
}
.search input[type="text"]:focus ~ .symbol::before {
  width: 0%;
}
.search input[type="text"]:focus ~ .symbol:after {
  -webkit-clip-path: inset(0% 0% 0% 100%);
          clip-path: inset(0% 0% 0% 100%);
  -webkit-transition: -webkit-clip-path .04s linear .105s;
  transition: -webkit-clip-path .04s linear .105s;
  transition: clip-path .04s linear .105s;
  transition: clip-path .04s linear .105s, -webkit-clip-path .04s linear .105s;
}
.search input[type="text"]:focus ~ .symbol .cloud {
  top: -30px;
  left: -30px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}
.search input[type="text"]:focus ~ .symbol .lens {
  top: 20px;
  left: 15px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  fill: var(--primary-color);
  -webkit-transition: top .5s ease .1s, left .5s ease .1s, fill .3s ease;
  transition: top .5s ease .1s, left .5s ease .1s, fill .3s ease;
}
.search .symbol {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.search .symbol:before {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  z-index: -1;
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
}
.search .symbol:after {
  content: "";
  position: absolute;
  top: 21px;
  left: 21px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  z-index: 1;
  -webkit-clip-path: inset(0% 0% 0% 0%);
          clip-path: inset(0% 0% 0% 0%);
  -webkit-transition: -webkit-clip-path .04s linear .225s;
  transition: -webkit-clip-path .04s linear .225s;
  transition: clip-path .04s linear .225s;
  transition: clip-path .04s linear .225s, -webkit-clip-path .04s linear .225s;
}
.search .symbol .cloud,
.search .symbol .lens {
  position: absolute;
  fill: #fff;
  stroke: none;
  top: 50%;
  left: 50%;
}
.search .symbol .cloud {
  width: 35px;
  height: 32px;
  -webkit-transform: translate(-50%, -60%);
          transform: translate(-50%, -60%);
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}
.search .symbol .lens {
  fill: #fff;
  width: 16px;
  height: 16px;
  z-index: 2;
  top: 24px;
  left: 24px;
  -webkit-transition: top .3s ease, left .3s ease, fill .2s ease .2s;
  transition: top .3s ease, left .3s ease, fill .2s ease .2s;
}

body {
  background: #E8EBF3;
  height: 100vh;
  font: 400 16px 'Varela Round', sans-serif;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
body .socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}
body .socials > a {
  display: block;
  width: 30px;
  opacity: var(--opacity, 0.2);
  -webkit-transform: scale(var(--scale, 0.8));
          transform: scale(var(--scale, 0.8));
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91), -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials > a:hover {
  --scale: 1;
}
</style>

<div class="search">
<input type="text" placeholder="search" />
<div class="symbol">
<svg class="cloud">
<use xlink:href="#cloud" />
</svg>
<svg class="lens">
<use xlink:href="#lens" />
</svg>
</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" id="cloud">
<path d="M31.714,25.543c3.335-2.17,4.27-6.612,2.084-9.922c-1.247-1.884-3.31-3.077-5.575-3.223h-0.021
	C27.148,6.68,21.624,2.89,15.862,3.931c-3.308,0.597-6.134,2.715-7.618,5.708c-4.763,0.2-8.46,4.194-8.257,8.919
	c0.202,4.726,4.227,8.392,8.991,8.192h4.873h13.934C27.784,26.751,30.252,26.54,31.714,25.543z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="lens">
<path d="M15.656,13.692l-3.257-3.229c2.087-3.079,1.261-7.252-1.845-9.321c-3.106-2.068-7.315-1.25-9.402,1.83
	s-1.261,7.252,1.845,9.32c1.123,0.748,2.446,1.146,3.799,1.142c1.273-0.016,2.515-0.39,3.583-1.076l3.257,3.229
	c0.531,0.541,1.404,0.553,1.95,0.025c0.009-0.008,0.018-0.017,0.026-0.025C16.112,15.059,16.131,14.242,15.656,13.692z M2.845,6.631
	c0.023-2.188,1.832-3.942,4.039-3.918c2.206,0.024,3.976,1.816,3.951,4.004c-0.023,2.171-1.805,3.918-3.995,3.918
	C4.622,10.623,2.833,8.831,2.845,6.631L2.845,6.631z" />
</symbol>
</svg>
<a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
Folding Horizontal Menu
2
3D Navbar
3
Various Click Me! Buttons
4
Animating Toggle Buttons
5
Peeping Body
VISITORS
Online Users: 12
Recent Members: Bongani Radebe, sumanmukh1999@gmail.com, Jack the gripper♡, mbedel25, irwansrahman
advertisement 2