Здесь простой и в тоже красивый эффект для кнопки или другого элемента, где изначально написано одно на кнопки, но стоит навести на ее курсор, то появляется эффект и написано совершенно другое. Как можно все сделать, вы узнаете в материале, который представлен в этом материале, главное, не чего сложного в этом нет, все можно сделать на сайте.
HTML
Код
<div class="asnuanob-gakumen">
<span class="gsacekum-enmodan">
Наведи курсор
</span>
<span>
Красивый эффект
</span>
</div>
CSS
Код
.asnuanob-gakumen span {
color: #f5f3f3;
text-decoration: none;
text-align: center;
display: block;
cursor: pointer;
}
.asnuanob-gakumen, .gsacekum-enmodan {
transition: 0.3s;
}
.asnuanob-gakumen {
height: 64px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
background-color: #254382;
}
.gsacekum-enmodan{
margin-top: 0em;
}
.asnuanob-gakumen:hover .gsacekum-enmodan{
margin-top: -4em;
}
Можно поставить под многие функции.
Демонстрация
