Прекрасный эффект, который исполняется при наведение курсора, что здесь идет оригинальная анимация. Если на стандартном трюке можно заметить, что только цветовой фон поменяется. То в нашем случай все идет на знаки, так как они будут изменятся с той скоростью. которую в стилистике CSS можно выставить. Вообщем при наведение происходит смена знаков, где можно аналогичные поставить и только поменять саму гамму, что здесь сделал.
Но также если написано скачать, то выбираем название, где аналогично со словом "Скачать" знаков, и они появятся. Такой эффект понравился свой простотой, где все классы прописаны под все функций и дизайна, что можно изменить на любой понравившуюся гамму под свой сайт.
Приступаем к установке:
HTML
Код
<div class="kogered-lidingets">
<span data-text="Z">Z</span>
<span data-text="O">O</span>
<span data-text="R">R</span>
<span data-text="N">N</span>
<span data-text="E">E</span>
<span data-text="T">T</span>
</div>
CSS
Код
.kogered-lidingets {
width: 215px;
height: 58px;
border: 2px solid #909090;
text-align: center;
font-size: 28px;
line-height: 58px;
font-family: sans-serif;
overflow: hidden;
border-radius: 7px;
cursor: pointer;
background: #cecece;
box-shadow: 0px 1px 15px 3px rgba(51, 48, 48, 0.18), 1px 3px 30px 3px rgba(33, 30, 30, 0.23);
}
.kogered-lidingets span {
display: inline-block;
color: #14528a;
transition: 0.7s;
}
.kogered-lidingets span:nth-child(odd) {
transform: translateY(-100%);
}
.kogered-lidingets span:nth-child(even) {
transform: translateY(100%);
}
.kogered-lidingets span::before {
content: attr(data-text);
position: absolute;
color: #095a22;
}
.kogered-lidingets span:nth-child(odd)::before {
transform: translateY(100%);
}
.kogered-lidingets span:nth-child(even)::before {
transform: translateY(-100%);
}
.kogered-lidingets:hover span {
transform: translateY(0);
}
Установка завершена, где также представлена demo страница. С моей стороны были добавлены тени, что изначально понастроено на светлый фон.
Демонстрация
