Подборка Hover эффектов при наведении на ссылку CSS. Это пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание ссылок, заголовков, выделение цветом и многое другое.
Зачеркнутая ссылка или текст при наведении другим цветом CSS
Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.
Пример
Lorem Ipsum
HTML
<!-- Ссылка -->
<div class="crossed"><a href="#" class="crossed-link" title="">Lorem Ipsum</a></div>
<!-- Текст -->
<div class="crossed"><p class="crossed-text">Lorem Ipsum</p></div>
CSS
/* Ссылка */
a.crossed-link {
color: #f66d52; /* Цвет сылки */
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
position: relative;
display: inline-block;
}
a.crossed-link:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover a.crossed-link:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Текст */
p.crossed-text{
color: #ffa000; /* Цвет текста */
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
position: relative;
display: inline-block;
}
p.crossed-text:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover p.crossed-text:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Анимация */
@keyframes in {
0% {
width: 0;
left: 0;
right: auto;
}
100% {
left: 0;
right: auto;
width: 100%;
}
}
@keyframes out {
0% {
width: 100%;
left: auto;
right: 0;
}
100% {
width: 0;
left: auto;
right: 0;
}
}
@keyframes show {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Как изменить цвет ссылки при наведении CSS
Изменение цвета ссылки необходимо, когда нужно ее выделить, например в тексте, так ссылка будет выглядеть более привлекательно для пользователей. Но такая ссылка будет хорошо смотреться в любом месте сайта.
Пример
HTML
<a href="#" class="change-color-link" title="">Lorem Ipsum</a>
CSS
.change-color-link{
color: #f66d52; /* Цвет ссылки */
font-size: 2em;
font-weight: bold;
padding: 20px 0px;
line-height: 1;
text-decoration: none;
-webkit-transition: all 1s ease;
transition: all 1s ease; /* Время изменения цвета */
}
.change-color-link:hover{
color: #ffa000; /* Меняем цвет ссылки */
}
Подчеркивание у ссылки при наведении CSS
Эффект меняет цвет ссылки при наведении на нее и добавляет подчеркивание. Этот эффект хорошо подойдет, когда нужно выделить ссылку и поменять цвета на те, которые соответствуют сайту.
Пример
HTML
<a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
CSS
a {
color: #00bfff; /* Цвет обычной ссылки */
text-decoration: none; /* Убираем подчеркивание */
}
a:visited {
color: #8a2be2; /* Цвет посещённой ссылки */
}
a:hover {
color: #f66d52; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: underline; /* Добавляем подчеркивание */
}
Анимация с подчёркивающей и исчезающей линией у ссылки CSS
Этот эффект при наведении подойдет как для ссылки, так и для заголовка и текста, если это необходимо. С помощью такого эффекта можно выделить ключевые моменты и сделать сайт интереснее.
Пример
HTML
<a href="#" class="underline-one">Lorem Ipsum</a>
CSS
.underline-one {
color: #00bfff; /* Цвет обычной ссылки */
position: relative;
cursor: pointer;
text-decoration: none; /* Убираем подчеркивание */
}
.underline-one:after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px; /* Высота линии */
background-color: black; /* Цвет подчеркивания при исчезании линии*/
transition: width 0.5s; /* Время эффекта */
}
.underline-one:hover:after {
content: "";
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px; /* Высота линии */
background-color: red; /* Цвет подчеркивания при появлении линии*/
transition: width 0.5s; /* Время эффекта */
}
Анимация с подчёркивающей линией у ссылки CSS
Анимация с подчёркивающей линией у ссылки CSS подойдет как для ссылок, так и для заголовков и текста. Необходимо будет обернуть ссылку в дополнительный див, чтобы задать ему нужные свойства.
Пример
HTML
<div class="link-ease-in-out">
<a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
</div>
CSS
.link-ease-in-out a {
display: inline-block;
color: #00bfff; /* Цвет обычной ссылки */
line-height: 1;
text-decoration: none; /* Убираем подчеркивание */
cursor: pointer;
}
.link-ease-in-out a:after {
background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
display: block;
content: "";
height: 2px; /* Высота линии */
width: 0%;
-webkit-transition: width .3s ease-in-out;
-moz--transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
.link-ease-in-out a:hover:after,
.link-ease-in-out a:focus:after {
width: 100%;
}
Изменение фона и цвета ссылки CSS
Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.
Пример
Lorem Ipsum
HTML
<p>Lorem Ipsum</p>
CSS
p {
color: #5a5a5a; /* Цвет текста */
background: #ffc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
transition: 1s linear; /* Время изменения */
}
p:hover {
color: #fff; /* Цвет текста */
background: #f66d52; /* Цвет фона */
}