« Подчеркивание ссылок с эффектов развернутости на чистом CSS »

Описание материала:

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

В данном материале мы использовали чистый CSS для создания эффекта, и вся программа основана на простом HTML и CSS. Это просто основная работа, поэтому нам не нужно использовать какую-либо библиотеку или js. Вы можете использовать этот эффект для оформления ссылок на вашем сайте.

После описание вы сможете посмотреть, как выглядеть данный код, перейдя по ссылке Демонстрация.

Подчеркивание ссылок с эффектов развернутости на чистом CSS

Установка:

HTML код:
Код
<!-- ( http://ufive.ru ) -->
<span class="u5-block">
  <p>
  " У нас вы можете найти к себе на сайт, такие материалы как - <a href="#" class="u5-link">Шаблоны</a>, <a href="#" class="u5-link">Скрипты</a>, <a href="#" class="u5-link">Информеры</a> и многое другое, для сайтов на бесплатном конструкторе uCoz. А так же у нас есть - <a href="#" class="u5-link">готовые PSD исходники</a> и <a href="#" class="u5-link">CSS элементы</a>. И это все абсолютно бесплатно. "
  <strong>- uFive.Ru</strong>
  </p>
</span>


CSS код:
Код
/* ( http://ufive.ru ) */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

.u5-block a {
  cursor: pointer;
}

.u5-block strong {
  margin-top: 16px;
  display: block;
  font-weight: 800;
  font-size: 22px;
  font-family: "Ubuntu", sans-serif;
  text-align: right;
}

.u5-block p {
  padding: 24px;
  max-width: 760px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Ubuntu", sans-serif;
  color: #393939;
}

.u5-link {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: #393939;
  padding: 0 1px;
  transition: color ease 0.3s;
}

.u5-link::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 5%;
  left: 0;
  bottom: 0;
  background: linear-gradient(120deg, #ff5200 0%, #f3be81 100%);
  transition: all ease 0.3s;
}

.u5-link:hover {
  color: #fff;
}

.u5-link:hover::after {
  height: 100%;
}


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 101


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar