От автора: CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта.
Мы говорим про :hover. Однако бывают случаи (не всегда), когда лучше добавить также :focus, так как не всегда для взаимодействия используется мышь. Иногда это может быть тачскрин или нажатие клавиш.
Эффект скользящей подсветки ссылки при наведении мыши
Такой эффект использует box shadow для инлайн ссылки и меняет цвет ее текста. Сначала добавить padding со всех сторон ссылки. Затем – отрицательный margin с тем же значением, чтобы padding не прерывал текст. Мы используем box-shadow вместо свойства background из-за transition.
a { box-shadow: inset 0 0 0 0 #54b3d6; color: #54b3d6; margin: 0 -.25rem; padding: 0 .25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover { box-shadow: inset 100px 0 0 0 #54b3d6; color: white;
}Эффект замены текста при наведении мыши на ссылку
Далее разберем пример, когда текст ссылки заменяется на другой при наведении мыши. Наводим мышь, и старый текст скрывается, а новый текст выезжает. Легче показать.
С этим эффектом есть небольшая хитрость. Магия заключается в использовании data-атрибута. С его помощью задается текст, который будет въезжать в область видимости. Также он вызывается со свойством content у псевдо-элемента ::after на ссылке. Первым делом HTML:
<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>
Очень большая разметка, правда. Нужно обратить внимание на тег параграфа, внутри которого ссылка и span. Напишем базовые стили для ссылки. Чтобы спозиционировать псевдо-элементы абсолютно, нужно придать ссылке относительное позиционирование. Ссылка должна иметь display: inline-block, чтобы обладать свойствами блокового элемента. Также спрячьте все переполнения, которые могут возникнуть из-за псевдо-элементов.
a { overflow: hidden; position: relative; display: inline-block;
}Псевдо-элементы ::before и ::after должны обладать абсолютным позиционированием, чтобы наложиться поверх реальной ссылки. Зададим для них нулевой сдвиг слева, чтобы точно знать, что они закрывают всю ширину ссылки.
a::before,
a::after { content: ''; position: absolute; width: 100%; left: 0;
}Псевдо-элемент ::after получает контент из дата-атрибута ссылки из HTML:
a::after { content: attr(data-replace);
}Теперь можно выполнить transform: translate3d() для ::after вправо на 200%. При :hover возвращаем псевдо-элемент обратно. Теперь можно добавить нулевой сдвиг для top. Это будет важно чуть позже, когда мы будем использовать ::before для подчеркивания текста.
a::after { content: attr(data-replace); top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0);
} a:hover::after,
a:focus::after { transform: translate3d(0, 0, 0);
}Добавим transform: scale() для ::before, чтобы по умолчанию он был скрыт, а при :hover появлялся. Сделаем его маленьким, 2px в высоту, и прижмем к нижнему краю, чтобы это было похоже на подчеркивание текста, которые выезжает вместе с ::after.
a::before { background-color: #54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0);
} a:hover::before,
a:focus::before { transform-origin: 0% 50%; transform: scaleX(1);
}Остальные настройки по желанию! Мы добавили переход на эффект transform, пару цветов и т.д. Здесь уже все зависит от вас.
Весь CSS:
a { overflow: hidden; position: relative; display: inline-block;
} a::before,
a::after { content: ''; position: absolute; width: 100%; left: 0;
}
a::before { background-color: #54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); color: #54b3d6;
} a:hover::before { transform-origin: 0% 50%; transform: scaleX(1);
}
a:hover::after { transform: translate3d(0, 0, 0);
} a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
} a:hover span { transform: translate3d(-200%, 0, 0);
}Эффект с увеличением бэкграунда при наведении мыши на ссылку
Довольно популярный эффект. Я видел его на паре сайтов. Идея заключается в том, чтобы использовать ::before ссылки в качестве толстого подчеркивания, которое расположено прямо за ссылкой. При наведении мыши псевдо элемент расширяется на всю ссылку.
ОК, немного базовых стилей для ссылки. Нам не нужен text-decoration, вместо него будет выступать ::before. Добавим ссылке относительное позиционирование, чтобы абсолютно спозиционировать ::before.
a { text-decoration: none; position: relative;
}Сделаем ::before 8px в высоту, чтобы он был похож на толстое подчеркивание. Также добавим абсолютное позиционирование, чтобы контролировать положение. Слева будет 0, а снизу совсем небольшой отступ, чтобы элемент подсвечивал ссылку. Можно добавить z-index: -1, чтобы элемент точно был позади ссылки.
a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1;
}Добавим эффект увеличения ::before при наведении мыши на ссылку. Для этого нужно всего лишь увеличить высоту с 3px до 100%. Обратите внимание, я также сбрасываю нижний сдвиг до 0, чтобы бэкграунд занимал больше места по мере растягивания.
a:hover::before { bottom: 0; height: 100%;
}Добавим легкий переход:
a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out;
}Полный CSS:
a { text-decoration: none; color: #18272F; font-weight: 700; position: relative;
} a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out;
} a:hover::before { bottom: 0; height: 100%;
}Эффект замены цвета справа налево при наведении мыши на ссылку
Мне нравится использовать этот эффект в меню навигации. Сначала это просто одноцветная ссылка без подчеркивания. Но при наведении мыши справа въезжает новый цвет, а слева скользит подчеркивание.
Как это работает? Мы задали ссылке бэкграунд в виде линейного градиента с четкой границей между двумя цветами посередине.
a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
}Добавим бэкграунду двойную ширину ссылки или 200% и расположим его слева. Таким образом, только один цвет из градиента отображается в кадре.
a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%;
}Магия начинается с нестандартными свойствами -webkit-. Первое свойство делает текст прозрачным. Второе обрезает бэкграунд градиент таким образом, чтобы он был виден только в тексте. Таким образом текст принимает цвет бэкграунда.
a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}Все еще читаете? Давайте добавим фальшивое подчеркивание ссылки с помощью ::before. Установим для него тот же цвет что и скрытой части градиента. Расположим элемент под нашей ссылкой, чтобы создать эффект подчеркивания.
a:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px;
}При наведении мыши мы двигаем ::before слева направо:
a:hover { background-position: 0;
}Теперь немного сложно. При наведении мыши мы задаем ширину ::before на 100% от ширины ссылки. Если применить это напрямую к ссылке, то мы бы растянули саму ссылку на всю ширину, из-за чего она начала бы двигаться по экрану. Вот так!
a:hover::before { width: 100%;
}Сгладим эффект с помощью перехода:
a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;
}Весь CSS:
a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;
} a:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out;
} a:hover { background-position: 0;
} a:hover::before { width:100%;
}Эффект с радужным подчеркиванием ссылки при наведении мыши
Мы не можем просто сделать -decoration-color: rainbow. Но мы можем сымитировать эффект с помощью бэкграунда и линейного градиента. Первым делом удалим у ссылки text-decoration:
a { text-decoration: none;
}Теперь градиенты. Сцепляем 2 линейных градиента внутри одного свойства background. Первый градиент – начальный цвет до наведения мыши. Второй – наша радуга.
a { background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
}Уменьшим размер бэкграунда до 3px, чтобы он походил на подчеркивание. Можно менять размер обоих градиентов через свойство background-size. Зададим первому градиента полную ширину и высоту 3px. Ширина второго 0.
a { background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) ); background-size: 100% 3px, 0 3px;
}Расположим бэкграунд градиенты таким образом, чтобы первый был полностью виден, а второй полностью скрыт. Для этого используем свойство background-position. Также уберем повторение бэкграунда.
a { background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) ); background-size: 100% 3px, 0 3px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat;
}Обновим background-size при наведении и поменяем значения градиентов.
a:hover { background-size: 0 3px, 100% 3px;
}Добавим небольшой переход при наведении мыши:
a { background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) ); background-size: 100% 3px, 0 3px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 400ms;
}Вуаля!
Эффект проходящего подчеркивания при наведении мыши на ссылку
Geoff Graham недавно рассказал про этот эффект когда анализировал hover эффект Adam Argyle. В его демо бэкграунд появляется слева за ссылкой и уходит вправо, если мышь убрать. В моей версии бэкграунд урезается до подчеркивания.
a { position: relative;
} a::before { content: ''; position: absolute; width: 100%; height: 4px; border-radius: 4px; background-color: #18272F; bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out; } a:hover::before { transform-origin: left; transform: scaleX(1);
}Это не единственный способ! Есть еще один от Justin Wong с использованием бэкграунда:
У Geoff тоже есть подборка CSS эффектов при наведении мыши на ссылку от элегантных до самых абсурдных. Зацените!
Удачи
Когда речь заходит о CSS эффектах наведения мыши на ссылки, можно много чего придумать. Вы можете поиграться с описанными эффектами и создать что-то свое. Надеюсь, вам понравилась статья. Продолжайте экспериментировать!
Автор: Harshil Patel
Источник: css-tricks.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен