• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Изменение текста при наведении на кнопку (Как поменять текст на кнопке при наведении)
Изменение текста при наведении на кнопку
Kosten
Дата: Среда, 2018-12-26, 20:39 | Сообщение 1
Администраторы
Сообщений:23402
Награды: 56


Здесь простой и в тоже красивый эффект для кнопки или другого элемента, где изначально написано одно на кнопки, но стоит навести на ее курсор, то появляется эффект и написано совершенно другое. Как можно все сделать, вы узнаете в материале, который представлен в этом материале, главное, не чего сложного в этом нет, все можно сделать на сайте.



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;
}


Можно поставить под многие функции.

Демонстрация
Прикрепления: 7594241.png(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Изменение текста при наведении на кнопку (Как поменять текст на кнопке при наведении)
  • Страница 1 из 1
  • 1
Поиск: