• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Форма поиска с эффектом кнопки на CSS (Поиск по сайту в светло краснос оттенке для интернет блога)
Форма поиска с эффектом кнопки на CSS
Kosten
Дата: Суббота, 2019-02-23, 23:51 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24630
Награды: 57


Отлично сделана анимированная кнопка поиска, где идет значок стрелки, что будет появляться при наведении клика, это будет один эффект на такой поиске. А основном он заточен для поиска по сайту, только изначально создан в больших формах, что можно только догадываться, что создавали под отдельную страницу.

Это поисковая форма, созданная с использованием 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;
}

Если ставить на сайт, как пример на главную страницу, то просто в стилях значение делаем меньше за объем каркаса.

Демонстрация
Прикрепления: 0005092.png(19.4 Kb) · 1943695.png(16.0 Kb) · search-form.zip(2.2 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Форма поиска с эффектом кнопки на CSS (Поиск по сайту в светло краснос оттенке для интернет блога)
  • Страница 1 из 1
  • 1
Поиск: