6 креативных идей CSS hover эффекта для ссылок
Мы говорим про :hover. Однако бывают случаи (не всегда), когда лучше добавить также :focus, так как не всегда для взаимодействия используется мышь. Иногда это может быть тачскрин или нажатие клавиш.
Эффект скользящей подсветки ссылки при наведении мыши
Содержание статьи:
Такой эффект использует box shadow для инлайн ссылки и меняет цвет ее текста. Сначала добавить padding со всех сторон ссылки. Затем – отрицательный margin с тем же значением, чтобы padding не прерывал текст. Мы используем box-shadow вместо свойства background из-за transition.
CSS 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; }
| 1234567891011 | 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;} |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CodePen Embed Fallback
Эффект замены текста при наведении мыши на ссылку
Далее разберем пример, когда текст ссылки заменяется на другой при наведении мыши. Наводим мышь, и старый текст скрывается, а новый текст выезжает. Легче показать.
С этим эффектом есть небольшая хитрость. Магия заключается в использовании data-атрибута. С его помощью задается текст, который будет въезжать в область видимости. Также он вызывается со свойством content у псевдо-элемента ::after на ссылке. Первым делом HTML:
<p>Hover <a href=”#” data-replace=”get a link”><span>get a link</span></a></p>
| 1 | <p>Hover <a href=”#” data-replace=”get a link”><span>get a link</span></a></p> |
Очень большая разметка, правда. Нужно обратить внимание на тег параграфа, внутри которого ссылка и span. Напишем базовые стили для ссылки. Чтобы спозиционировать псевдо-элементы абсолютно, нужно придать ссылке относительное позиционирование. Ссылка должна иметь display: inline-block, чтобы обладать свойствами блокового элемента. Также спрячьте все переполнения, которые могут возникнуть из-за псевдо-элементов.
CSS a { overflow: hidden; position: relative; display: inline-block; }
| 12345 | a { overflow: hidden; position: relative; display: inline-block;} |
Псевдо-элементы ::before и ::after должны обладать абсолютным позиционированием, чтобы наложиться поверх реальной ссылки. Зададим для них нулевой сдвиг слева, чтобы точно знать, что они закрывают всю ширину ссылки.
CSS a::before, a::after { content: ”; position: absolute; width: 100%; left: 0; }
| 1234567 | a::before,a::after { content: ”; position: absolute; width: 100%; left: 0;} |
Псевдо-элемент ::after получает контент из дата-атрибута ссылки из HTML:
CSS a::after { content: attr(data-replace); }
| 123 | a::after { content: attr(data-replace);} |
Теперь можно выполнить transform: translate3d() для ::after вправо на 200%. При :hover возвращаем псевдо-элемент обратно. Теперь можно добавить нулевой сдвиг для top. Это будет важно чуть позже, когда мы будем использовать ::before для подчеркивания текста.
CSS 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); }
| 1234567891011 | 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.
CSS 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); }
| 12345678910111213 | 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, пару цветов и т.д. Здесь уже все зависит от вас.
CodePen Embed Fallback
Весь CSS:
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); }
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 | 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.
CSS a { text-decoration: none; position: relative; }
| 1234 | a { text-decoration: none; position: relative;} |
Сделаем ::before 8px в высоту, чтобы он был похож на толстое подчеркивание. Также добавим абсолютное позиционирование, чтобы контролировать положение. Слева будет 0, а снизу совсем небольшой отступ, чтобы элемент подсвечивал ссылку. Можно добавить z-index: -1, чтобы элемент точно был позади ссылки.
CSS a::before { content: ”; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; }
| 12345678910 | 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, чтобы бэкграунд занимал больше места по мере растягивания.
CSS a:hover::before { bottom: 0; height: 100%; }
| 1234 | a:hover::before { bottom: 0; height: 100%;} |
Добавим легкий переход:
CSS 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; }
| 1234567891011 | 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;} |
CodePen Embed Fallback
Полный CSS:
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%; }
| 1234567891011121314151617181920212223 | 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%;} |
Эффект замены цвета справа налево при наведении мыши на ссылку
Мне нравится использовать этот эффект в меню навигации. Сначала это просто одноцветная ссылка без подчеркивания. Но при наведении мыши справа въезжает новый цвет, а слева скользит подчеркивание.
Как это работает? Мы задали ссылке бэкграунд в виде линейного градиента с четкой границей между двумя цветами посередине.
CSS a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); }
| 12345678 | a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );} |
Добавим бэкграунду двойную ширину ссылки или 200% и расположим его слева. Таким образом, только один цвет из градиента отображается в кадре.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; }
| 12345678910 | a { background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%;} |
Магия начинается с нестандартными свойствами -webkit-. Первое свойство делает текст прозрачным. Второе обрезает бэкграунд градиент таким образом, чтобы он был виден только в тексте. Таким образом текст принимает цвет бэкграунда.
CSS 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; }
| 123456789101112 | 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. Установим для него тот же цвет что и скрытой части градиента. Расположим элемент под нашей ссылкой, чтобы создать эффект подчеркивания.
CSS a:before { content: ”; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; }
| 12345678910 | a:before { content: ”; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px;} |
При наведении мыши мы двигаем ::before слева направо:
CSS a:hover { background-position: 0; }
| 123 | a:hover { background-position: 0;} |
Теперь немного сложно. При наведении мыши мы задаем ширину ::before на 100% от ширины ссылки. Если применить это напрямую к ссылке, то мы бы растянули саму ссылку на всю ширину, из-за чего она начала бы двигаться по экрану. Вот так!
CSS a:hover::before { width: 100%; }
| 123 | a:hover::before { width: 100%;} |
Сгладим эффект с помощью перехода:
CSS 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; }
| 12345678910111213 | 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;} |
CodePen Embed Fallback
Весь CSS:
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%; }
| 123456789101112131415161718192021222324252627282930313233343536 | 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:
CSS a { text-decoration: none; }
| 123 | a { text-decoration: none;} |
Теперь градиенты. Сцепляем 2 линейных градиента внутри одного свойства background. Первый градиент – начальный цвет до наведения мыши. Второй – наша радуга.
CSS 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) ); }
| 1234567891011121314 | 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.
CSS 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; }
| 123456789101112131415 | 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. Также уберем повторение бэкграунда.
CSS 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; }
| 1234567891011121314151617 | 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 при наведении и поменяем значения градиентов.
CSS a:hover { background-size: 0 3px, 100% 3px; }
| 123 | a:hover { background-size: 0 3px, 100% 3px;} |
Добавим небольшой переход при наведении мыши:
CSS 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; }
| 123456789101112131415161718 | 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;} |
Вуаля!
CodePen Embed Fallback
Эффект проходящего подчеркивания при наведении мыши на ссылку
Geoff Graham недавно рассказал про этот эффект когда анализировал hover эффект Adam Argyle. В его демо бэкграунд появляется слева за ссылкой и уходит вправо, если мышь убрать. В моей версии бэкграунд урезается до подчеркивания.
CSS 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); }
| 12345678910111213141516171819202122 | 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);} |
CodePen Embed Fallback
Это не единственный способ! Есть еще один от Justin Wong с использованием бэкграунда:
CodePen Embed Fallback
У Geoff тоже есть подборка CSS эффектов при наведении мыши на ссылку от элегантных до самых абсурдных. Зацените!
Удачи
Когда речь заходит о CSS эффектах наведения мыши на ссылки, можно много чего придумать. Вы можете поиграться с описанными эффектами и создать что-то свое. Надеюсь, вам понравилась статья. Продолжайте экспериментировать!
Автор: Harshil Patel
Источник: webformyself.com