Отлично сделана анимированная кнопка поиска, где идет значок стрелки, что будет появляться при наведении клика, это будет один эффект на такой поиске. А основном он заточен для поиска по сайту, только изначально создан в больших формах, что можно только догадываться, что создавали под отдельную страницу.
Это поисковая форма, созданная с использованием HTML и при помощи CSS. Через код CSS кнопка лупы имеет эффект анимации, который может быть преобразован в стрелку вправо при наведении курсора. А так не чего особого, главное чтоб отлично подошла по своему дизайну, который можно редактировать к прикрепленной стилистике CSS.
По умолчанию:
При наведение:
HTML
Код
<div id="kezalesokab">
<form method="get" action="">
<div class="mikeeysord">
<div class="kebusines"><input type="text" placeholder="Поиск по сайту" required></div>
<div class="kebusines" id="gtanumike">
<button type="submit">
<div id="glonesagtanu"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>
CSS
Код
.mikeeysord{
display: table;
width: 100%;
}
.kebusines{
display: table-cell;
vertical-align: middle;
}
input, button{
color: #fff;
font-family: Nunito;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
#kezalesokab{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
}
form{
height: 96px;
}
input[type="text"]{
width: 100%;
height: 96px;
font-size: 60px;
line-height: 1;
}
input[type="text"]::placeholder{
color: #e16868;
}
#gtanumike{
width: 1px;
padding-left: 35px;
}
button{
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}
#glonesagtanu{
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}
button span{
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}
button span:before, button span:after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}
#gtanumike:hover #glonesagtanu{
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
#gtanumike:hover span{
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}
#gtanumike:hover button span:before{
bottom: 11px;
transform: rotateZ(52deg);
}
#gtanumike:hover button span:after{
bottom: -11px;
transform: rotateZ(-52deg);
}
#gtanumike:hover button span:before, #gtanumike:hover button span:after{
right: -6px;
width: 40px;
background-color: #fff;
}
Если ставить на сайт, как пример на главную страницу, то просто в стилях значение делаем меньше за объем каркаса.
Демонстрация
