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


Давайте разберем оригинальную кнопку по эффекту, что присутствует в самом каркасе. Ведь по стилистике или дизайн она идет в простом виде, так, что здесь веб разработчик сам выстроит ту стилистику под свой дизайн сайта.

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



HTML

Код
<button class="animirovan-knopka"><img src="http://zornet.ru/ABVUN/Aba/detunis/Animation.gif" alt="Animation zornet.ru" width="28" height="28">Кнопка</button>

CSS

Код
.animirovan-knopka {
    color: #383737;
    background: #d0e2f9;
    padding: 8px;
    font-size: 19px;
    border-radius: 7px;
    box-shadow: -1px 2px 9px 1px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease-out;
    cursor: pointer;
}
.animirovan-knopka{
padding: 10px 35px;
overflow:hidden;
}

.animirovan-knopka img {
position: absolute;
top: 7px;
left: -30px;
transition: all 200ms ease;
}

.animirovan-knopka:hover img {
left: 5px;
}


На этом вся установка, остается сделать ее по оформлению как вы сами видите на своем сайте или все оставить по умолчанию.

Демонстрация
Прикрепления: 6813348.png(3.9 Kb) · desam.zip(3.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с прикольным эффектом при наведении (Кнопка с оригинальным эффектом с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: