<div id="app-cover">
  <div id="app">
    <form method="get" action="">
      <div id="f-element">
        <div id="inp-cover"><input type="text" name="query" placeholder="Type something to search ..." autocomplete="off"></div>
      </div>
      <button type="submit" class="shadow"><i class="fas fa-search"></i></button>
    </form>
  </div>
  <div id="layer" title="Click the blue area to hide the form"></div>
  <div id="init"></div>
</div>

* {
  outline: none;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
}

body,
input {
  cursor: url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 32 32, auto;
  cursor: -webkit-image-set(url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 1x,url(http://k003.kiwi6.com/hotlink/z6fy599487/c2.png) 2x) 32 32, auto;
}

body:active,
input:active {
  cursor: url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 32 32, auto;
  cursor: -webkit-image-set( url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 1x, url(http://k003.kiwi6.com/hotlink/6ma7828al1/c2a.png) 2x ) 32 32, auto;
}

#app-cover {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 434px;
  margin: -41px auto 0 auto;
}

#app {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 120px;
  margin: 0 auto;
  transition: 0.15s ease width;
  z-index: 2;
}

form {
  position: relative;
  height: 82px;
  cursor: auto;
  border-radius: 120px;
}

#f-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 120px;
}

#inp-cover {
  position: absolute;
  top: 0;
  right: 41px;
  bottom: 0;
  left: 0;
  padding: 0 35px;
  background-color: #fff;
}

input {
  display: block;
  width: 100%;
  font-size: 19px;
  font-family: Arial, Helvetica, sans-serif;
  color: #00688a;
  border: 0;
  padding: 30px 0;
  margin: 0;
  margin-top: 52px;
  line-height: 1;
  background-color: transparent;
  transition: 0.15s ease margin-top;
  cursor: auto;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  width: 82px;
  height: 82px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  padding: 26px;
  margin: 0;
  border: 0;
  background-color: #1eaddc;
  transition: 0.2s ease background-color;
  border-radius: 50%;
}

button.shadow {
  box-shadow: 0 10px 30px #d0d0d0;
}

button i.fas {
  display: block;
  line-height: 1;
}

#layer {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #1eaddc;
  transition: 0.9s ease all;
  z-index: 1;
}

#layer.sl {
  transition: 0.3s ease all;
}

#layer,
#init {
  position: fixed;
  top: 50%;
  margin: -40px auto 0 auto;
}

#layer {
  right: -100px;
  left: -100px;
}

#init {
  right: 0;
  left: 0;
  width: 82px;
  height: 82px;
  cursor: pointer;
  z-index: 2;
}

#app.opened {
  width: 434px;
  box-shadow: 0 10px 30px #0190bf;
}

.opened input.move-up {
  margin-top: 0;
}

.opened button {
  color: #1eaddc;
  background-color: #fff;
  box-shadow: none;
  cursor: pointer;
}

#app.opened + #layer {
  width: 4000px;
  height: 4000px;
  margin-top: -2000px;
  opacity: 1;
  z-index: 0;
}

#app.opened ~ #init {
  z-index: -1;
}

$(function () {
  var app = $("#app"),
    init = $("#init"),
    layer = $("#layer"),
    input = $("#inp-cover input"),
    button = $("button");

  function toggleApp() {
    app.toggleClass("opened");

    if (button.hasClass("shadow")) button.toggleClass("shadow");
    else
      setTimeout(function () {
        button.toggleClass("shadow");
      }, 300);

    if (app.hasClass("opened")) {
      setTimeout(function () {
        input.toggleClass("move-up");
      }, 200);
      setTimeout(function () {
        input.focus();
      }, 500);
    } else
      setTimeout(function () {
        input.toggleClass("move-up").val("");
      }, 200);

    if (!layer.hasClass("sl")) {
      setTimeout(function () {
        layer.addClass("sl");
      }, 800);
    } else
      setTimeout(function () {
        layer.removeClass("sl");
      }, 300);
  }

  layer.on("click", toggleApp);
  init.on("click", toggleApp);
});