BloGGood.ru

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

До Нового Года осталось:

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

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

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

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

Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется 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:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :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]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

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

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

3). Довести количество статей до 750

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

5). Создать книгу

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

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

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

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

Количество записей на блоге: 718
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3911