<div class="body">
<div class="search">
<div class="bar"></div>
</div>
<input type="text" class="input" autofocus>
</div>body {
padding: 0;
margin: 0;
}
::placeholder {
color: #ECEFF1;
}
.body {
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #00BCD4, #5C6BC0);
}
.input {
display:none;
background: transparent;
color: white;
position: absolute;
left: 54.7%;
top: 49%;
transform: translate(-70%, -60%);
width: 440px;
height: 40px;
border-radius: 100px;
padding: 30px;
font-size: 50px;
border: none;
}
.input:focus {
outline: none;
}
.search {
background: transparent;
width: 100px;
height: 100px;
border-radius: 100px;
border: 20px solid white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-70%, -60%);
box-shadow: 0px 5px 10px rgba(0,0,0,.3);
}
.bar {
height: 80px;
width: 30px;
border-radius: 50px;
background: white;
position: absolute;
top: 90%;
left: 100%;
transform: rotate(-45deg);
box-shadow: 0px 5px 10px rgba(0,0,0,.3);
}$(".search").click(function() {
if($(".search").css("width")=="100px")
{
$(".bar").animate({
height: "0px",
left: "80%"
}, 400);
setTimeout(function() {
$(".search").animate({
width: "500px",
left: "55%"
});
$(".input").css("display", "initial");
}, 400);
setTimeout(function() {
$(".input").attr("placeholder", "Search").focus();
}, 900);
}
else {
$(".search").animate({
width: "100px",
left: "50%"
});
$(".input").css("display", "none");
setTimeout(function() {
$(".bar").animate({
height: "80px",
left: "100%"
}, 400);
}, 400);
}
});
$(".body").click(function() {
if($(".search").css("width")=="500px") {
$(".search").animate({
width: "100px",
left: "50%"
});
$(".input").css("display", "none");
setTimeout(function() {
$(".bar").animate({
height: "80px",
left: "100%"
}, 400);
}, 400);
}
});
External CSS
This Pen doesn't use any external CSS resources.