<!DOCTYPE html>
<html>
<head>
<title>Serch box</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="middle">
<form action="" class="search-box" method="post">
<input type="text" class="input" name="" value="">
<button type="button" class="btn" name="button"></button>
</form>
</div>
<script type="text/javascript">
$(".btn").on("click",function(){
$(".input").toggleClass("inclicked");
$(".btn").toggleClass("close");
});
</script>
</body>
</html>*
{
margin: 0;
padding: 0;
background: #2ecc71;
}
.middle
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
}
.input
{
width: 60px;
height: 60px;
background: none;
border-radius: 50%;
border: 4px solid #fff;
box-sizing: border-box;
outline: none;
transition: width 0.4s ease-in-out,
border-radius 0.8s ease-in-out,
padding 0.2s;
transition-delay: 0.4s;
color: white;
font-size: 20px;
}
.inclicked
{
width: 360px;
border-radius: 0;
padding: 0 15px;
padding-right: 40px;
}
.btn
{
position: absolute;
width: 60px;
height: 60px;
top: 0;
right: 0;
box-sizing: border-box;
background: none;
border: none;
outline: none;
cursor: pointer;
}
.btn::before
{
content: "";
width: 4px;
height: 25px;
background: #fff;
position: absolute;
transform: rotate(-45deg);
bottom: -16px;
right: -6px;
transition: 0.3s;
}
.close::before,.close::after
{
content: "";
width: 4px;
height: 34px;
background: #fff;
position: absolute;
bottom: 12px;
right: 28px;
right: 28px;
}
.close::before
{
transform: rotate(-45deg);
}
.close::after
{
transform: rotate(45deg);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.