Давайте разберем оригинальную кнопку по эффекту, что присутствует в самом каркасе. Ведь по стилистике или дизайн она идет в простом виде, так, что здесь веб разработчик сам выстроит ту стилистику под свой дизайн сайта.
Главное считаю это эффект, где он реально прикольный, где мы видим, что при наведение курсора появляется с левой стороны элемент, виде изображение. Также есть эффект нажатие кнопки, что изначально делается по клику, когда вы уже наведи курсор, где можете посмотреть на 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;
}
На этом вся установка, остается сделать ее по оформлению как вы сами видите на своем сайте или все оставить по умолчанию.
Демонстрация
