Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется 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%; }
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222518 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187688 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
2 Ответов на комментарий - Эффект плавного подчеркивания ссылки с помощью CSS3
Добавить комментарий
Метки: css, эффекты для сайта
Спасибо за статью! Прикольный эффект, на своем сайте сделала такое подчеркивание для пунктов меню
Пожалуйста, Алена!
я рад, что понравился эффект.