• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание hover подчеркивание для ссылок (Сделать анимированное подчеркивание текста при наведение)
Создание hover подчеркивание для ссылок
Kosten
Дата: Понедельник, 2019-05-06, 01:24 | Сообщение 1
Администраторы
Сообщений:21751
Награды: 56


Еще один аналогичный вариант, только здесь не идет класс, если поставить, то будет эффект по всему сайту. Или также можно выставить под именно тот каталог, под который вам нужно. Создайте анимированное наведение курсора на CSS для более уникального наведения, чем скучные браузеры по умолчанию только с CSS.

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

Анимированные Hover подчеркивание



HTML

Код
<ul>
  <li><a href="#">Zornet.Ru</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Дизайн</a></li>
</ul>

CSS

Код
ul {
  margin: 85px auto 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 750px;
  text-align: center;
}
li {
  display: table-cell;
  position: relative;
  padding: 20px 0;
}
a {
  color: #f9f6d1;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.20em;
  display: inline-block;
  padding: 17px 15px;
  position: relative;
}
a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #e6e6e0;
  transition: width 0.5s ease 0s, left 0.5s ease 0s;
  width: 0;
}
a:hover:after {
  width: 100%;
  left: 0;
}


Демонстрация
Прикрепления: 6705856.gif(35.7 Kb) · hover.zip(2.0 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-05-06, 01:27 | Сообщение 2
Администраторы
Сообщений:21751
Награды: 56


Если создавать аналогичный эффект подчеркивание, но чтоб он был под классом, то в этой теме все подробно описано.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание hover подчеркивание для ссылок (Сделать анимированное подчеркивание текста при наведение)
  • Страница 1 из 1
  • 1
Поиск: