BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Эффект плавного подчеркивания ссылки с помощью CSS3

Эффект плавного подчеркивания ссылки с помощью CSS3

2016-06-02 / Вр:00:37 / просмотров: 8759

Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется CSS3.
Буду осуществлять эффект с помощью псевдоэлемента «:after»  и свойства «transition».
Предлагаю посмотреть демонстрацию эффекта:

[смотреть демонстрацию]

Как вам эффектик для ссылок?

=> эффект плавного подчеркивания ссылки слева направо

В HTML:

<a href="#" class="underline">Наведи курсор!</a>

CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

=> эффект плавного подчеркивания ссылки справа налево

Достаточно заменить строку №10 «left: 0;» на «right: 0;»

CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Эффект плавного подчеркивания ссылки с помощью CSS3

  1. Алена

    Спасибо за статью! Прикольный эффект, на своем сайте сделала такое подчеркивание для пунктов меню :smile:

  2. Avatar photo Степан => автор блога

    Пожалуйста, Алена!
    я рад, что понравился эффект.

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716