<a href="#" id="search"></a>
<a href="#" id="search"></a>
<p>Hover me</p>
p{
p{
margin:50px auto;
text-align:center;
color:#19d;
}
#search{
margin:100px auto;
display:block;
cursor:pointer;
width:60px;
height:60px;
border:10px solid #19d;
border-radius:60px;
border-radius:60px;
border-radius:60px;
transform:rotate(-45deg);
transform:rotate(-45deg);
transform:rotate(-45deg);
transform:rotate(-45deg);
transform:rotate(-45deg);
transition:.2s;
transition:.2s;
transition:.2s;
transition:.2s;
}
#search:after{
content:'';
display:block;
margin:60px auto;
width:22px;
height:45px;
border-radius:5px;
border-radius:5px;
border-radius:5px;
background:#19d;
}
#search:hover{
width:0px;
height:0px;
border:40px solid #19d;
transform:rotate(45deg);
transform:rotate(45deg);
transform:rotate(45deg);
transform:rotate(45deg);
transform:rotate(45deg);
border-radius:60px 60px 0px 60px;
border-radius:60px 60px 0px 60px;
border-radius:60px 60px 0px 60px;
}
#search:hover:after{
content:'';
display:block;
margin:-15px -15px;
width:30px;
height:30px;
border-radius:30px;
border-radius:30px;
border-radius:30px;
background:#fff;
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}