« Подчеркивание ссылок с эффектов развернутости на чистом CSS »
Сегодня мы научимся создавать подчеркивание, с эффектов развернутости при наведении. В основном, есть небольшой текст и в него помещены пять ссылок. В настоящее время ссылки пусты, потому что это только пример. Сначала под ссылкой вы увидите только градиент, но когда вы наведете на него курсор, он увеличит свою высоту и охватит весь текст.
В данном материале мы использовали чистый CSS для создания эффекта, и вся программа основана на простом HTML и CSS. Это просто основная работа, поэтому нам не нужно использовать какую-либо библиотеку или js. Вы можете использовать этот эффект для оформления ссылок на вашем сайте.
После описание вы сможете посмотреть, как выглядеть данный код, перейдя по ссылке Демонстрация.
Установка:
HTML код:
<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 код:
@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%;
}
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |