<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<script src="https://codepen.io/MilanMilosev/pen/EoLBjo"></script>
</head>
<body>
<form id="content">
<input type="text" name="input" class="input" id="search-input">
<button type="reset" class="search" id="search-btn"></button>
</form>
</body>
</html>
body {
background-color: #ff9800;
color: #fff;
margin: 0;
}
#content {
position: absolute;
height: 50px;
width: 300px;
margin-left: 170px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#content.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
input {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 4px solid #ffffff;
border-radius: 50%;
background: none;
color: #fff;
font-size: 16px;
font-weight: 400;
font-family: Roboto;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.search {
background: none;
position: absolute;
top: 0px;
left: 0;
height: 50px;
width: 50px;
padding: 0;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.search:before {
content: "";
position: absolute;
width: 20px;
height: 4px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 26px;
margin-left: 17px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close {
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
background-color: #fff;
margin-top: -1px;
margin-left: -13px;
cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.square {
box-sizing: border-box;
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid #ffffff;
border-radius: 0;
background: none;
color: #fff;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
padding 0.2s;
-webkit-transition-delay: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
"use strict";
var input = document.getElementById("search-input");
var searchBtn = document.getElementById("search-btn");
var expand = function expand() {
searchBtn.classList.toggle("close");
input.classList.toggle("square");
};
searchBtn.addEventListener("click", expand);