Эффект при наведении на ссылку

Эффект при наведении на ссылку

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

HTML-разметка

У нас меню будет горизонтальное, поэтому создаем четыре ссылки внутри тега nav. Для того, чтобы создать необходимые отступы, оборачиваем меню навигации в div с классом container. Вот и все, HTML разметка создана.

Пишем CSS код

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

Для всех псевдоэлементов указываем размер бокса box-sizing. Это нужно для того, чтобы внутренние отступы и рамка не влияли на ширину элемента.

Стилизация класса container

Зададим отступы со всех сторон от края браузера.

Содержимое контейнера (меню навигации) выравниваем по центру.

Пропишем название шрифта, второй шрифт запасной.

font-family: ‘Lato’, sans-serif;

Зададим цвет фона.

Стилизация ссылок меню навигации nav

Устанавливаем relative для позиционирования его дочерних элементов относительно его самого.

Переводим ссылки из строчных элементов в строчно-блочные, чтобы иметь возможность применить к ним свойства, предназначенные только для блочных элементов.

Задаем поля и отступы.

margin: 14px 24px;
padding: 9px 19px;

Остальные свойства тега nav достаточно простые и интуитивно понятные, отвечающие за внешний вид ссылок.

Заготовка из ссылок создана, можно приступать к реализации эффекта при наведении на ссылку. Мы не просто так к тегу nav приписали класс .link-up, сделали мы это специально для псевдоэлементов before и after, которые будут применяться к тегу ссылки a. Да и сам эффект построен исключительно на свойствах, применяемых к псевдоэлементам.

Читайте также:  Как зашифровать файл excel

Псевдоэлементы after и before

Синяя рамка вокруг ссылок на самом деле не настоящая, а псевдоэлемент before. Давайте разберём, какие свойства были использованы.

Синяя рамка строго привязана к ссылке, она как-бы накладывается на текст ссылки сверху.

Пустой content обязательный атрибут, без него рамки не будет видно. Визуализация рамки:

border: 2px solid #364856;
content: ‘ ‘;

Плавный переход при наведении на ссылку обеспечивает свойство.

transition: transform 0.4s, opacity 0.4s;

Рисуем белую рамку — after

Синяя рамка готова, теперь рисуем белую рамку, сдвигаем её на несколько пикселей по X и Y осям. Таким образом, чтобы белая рамка не повторяла контуры синей рамки и прячем её, делаем прозрачной. Ведь она должна появиться только при наведении на ссылку.

.link-up a::after <
transform: translateY(-8px) translateX(7px);
opacity: 0;
border-color: #ffffff;
>

Наведение на рамку – hover effect

При наведении синяя рамка исчезает.

.link-up a:hover::before,
.link-up a:focus::before <
transform: translateY(4px) translateX(-4px);
opacity: 0;
>

А белая рамка появляется и делает движение вниз.

.link-up a:hover::after,
.link-up a:focus::after <
opacity: 1;
transform: translateY(0px) translateX(0px);
>

Посмотреть результат и код эффекта при наведении целиком:

Для новичков, было бы хорошо пройти мой видеокурс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Читайте также:  Как можно перевозить стиральную машинку автомат

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Если вы ищите несколько крутых и действительно невероятным эффектов при наведении на различные объекты, например на кнопки, тогда эта подборка то что вам нужно. Тут есть действительно интересные решения, работающие на CSS и не только!

    Как на CSS сделать анимированный эффект подчёркивания при наведении на текст. Данный эффект популярен для пунктов меню. Появление подчёркивания от центра и .

    Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.

    Данный эффект — это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.

    Анимация с подчёркивающей линией

    Линия появляющаяся слева направо

    Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.

    Демо — наведите курсор на один из пунктов ниже:

    Для примера я взял простую по html конструкцию — родительский элемент с классом link-hover-solid , внутри которого идут ссылки — a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.

    CSS-код отвечающий за анимацию:

    Подчёркивающая линия появляющаяся из центра

    Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.

    Читайте также:  Блютуз клавиатура и мышь для планшета

    Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

    Если у вас есть вопросы — смело задавайте их в комментариях.

    *** Авторизируйтесь чтобы писать комментарии.

    Ссылка на основную публикацию
    Шпионский софт родом из холода
    Borderlands: The Pre-Sequel! Разработчики 2K Australia Gearbox Software Издатели 2K Games Часть серии Borderlands Дата выпуска 17 октября 2014 года...
    Что делать если плохо работает отпечаток пальца
    Владельцы современных смартфонов на платформе Android нередко сталкиваются с тем, что сканер отпечатков пальцев реагирует недостаточно быстро и точно. Зачастую...
    Что делать если пропал звук в наушниках
    Всё о Интернете, сетях, компьютерах, Windows, iOS и Android Нет звука в наушниках на телефоне — что делать?! А Вы...
    Штампованные диски арриво отзывы
    Приветствую всех! Запись будет, как Вы уже догадались, о дисках.Дело в том, что я любитель иметь на автомобиле два комплекта...
    Adblock detector