<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

<div class="wrapper">
  <div class="searchbox">
    <input type="text" class="input">
      
    <div class="searchbtn">
      <i class="fas fa-search"></i>
    </div>
    
  </div>
</div>









<!-- By Coding Market -->
<div class="youtube">
  <a href="https://www.youtube.com/channel/UCtVM2RthR4aC6o7dzySmExA" target="_blank">by coding market</a>
</div>

*{
  margin: 0;
  padding: 0;
}

body{
  background: #e4eaf0;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.searchbox{
  position: relative;
}

.searchbox .input{
  width: 0px;
  border: 0px;
  height: 75px;
  padding: 0px 35px;
  border-radius: 50px;
  box-shadow: 0 0 15px 1px #b6bbc0;
  outline: none;
  color: #42be11;
  font-weight: bold;
  font-size: 24px;
  transition: all 0.5s linear;
}

.searchbtn{
  position: absolute;
  top: 0;
  right: -1px;
  background: #fff;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s 0.6s linear;
}

.searchbtn .fas{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #42be11;
  font-size: 22px;
  transition: all 0.5s 0.6s linear;
}

/* jquery class */
.searchbtn.bg-green{
  background: #42be11;
  transition: all 0.2s linear;
}

.searchbtn .fas.color-white{
  color: #fff;
  transition: all 0.2s linear;
}

.searchbox .input.active-width{
  width: 275px;
}












/* youtube link */
.youtube{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 160px;
  text-align: center;
  padding: 15px 10px;
  background: #bb0000;
  border-radius: 5px;
}

.youtube a{
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 1px;
}

$(".searchbtn").click(function(){
  $(this).toggleClass("bg-green");
  $(".fas").toggleClass("color-white");
  $(".input").focus().toggleClass("active-width").val('');
});