Есть забавная идея с гладкой реализацией CSS, где стилях наведения мы можем сделать со ссылками, что должно получится красиво. Но здесь же отбрасываем юзабилити и безусловно все действие зададим в CSS.
Граница к фоновому эффекту
Возможно очень похожая нижняя граница ссылки по умолчанию может увеличиться и стать полным фоном ссылки при наведении курсора.
HTML
Код
<p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код
:root {
--mainColor: #da880f;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #191818;
text-decoration: none;
transition: background-size .2s;
}
a:hover {
background-size: 4px 50px;
}
See the Pen
Ссылка Effectz - Фон при наведении by Kocsten (@kocsten)
on CodePen.
Аналогичным способом, мы можем сделать что-то подобное по горизонтали:
HTML
Вашему вниманию эффекты на сайте zornet.ru плюс анимация
CSS
Код
:root {
--mainColor: #ff9800;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
a:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
See the Pen
Ссылка Effectz - Горизотональный фон by Kocsten (@kocsten)
on CodePen.
Выделенный текстовый эффект
Давайте выделим цвет шрифта и оставим контур позади.
HTML
Код
<p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код
:root {
--mainColor: #bf7b16;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
color: var(--mainColor);
text-decoration: none;
}
a:hover {
color: transparent;
-webkit-text-stroke: 2px var(--mainColor);
}
@supports not(-webkit-text-stroke: 2px red) {
a:hover {
text-shadow:
3px 3px 0 var(--mainColor),
-1px -1px 0 var(--mainColor),
1px -1px 0 var(--mainColor),
-1px 1px 0 var(--mainColor),
1px 1px 0 var(--mainColor);
}
}
See the Pen
Ссылка Effectz - Схема при наведении by Kocsten (@kocsten)
on CodePen.
Поднятый текстовый эффект
Другая идея состоит в том, чтобы поднять текст, как будто он вырастает из страницы при наведении:
HTML
Код
<p>Вашему вниманию эффекты на <a href="#">сайте zornet.ru</a> плюс анимация</p>
CSS
Код
:root {
--mainColor: #ff9800;
}
body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}
a {
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: var(--mainColor);
text-decoration: none;
}
a:hover {
/*background-image:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);*/
text-shadow: 0px 0px 0 rgb(208,138,28),1px 1px 0 rgb(165,123,26),2px 2px 0 rgb(242,185,100),3px 3px 0 rgb(227,167,187),4px 4px 0 rgb(182,129,63),5px 5px 0 rgb(161,117,50),6px 6px 0 rgb(144,103,39),7px 7px 0 rgb(130,91,31),8px 8px 0
rgb(120,83,25),9px 9px 0 rgb(108,73,20),10px 10px 0 rgb(93,63,13),11px 11px 0 rgb(60,54,12),12px 12px 0
rgb(63,41,8),13px 13px 0
}
See the Pen
Ссылка Effectz - Поднятый текст при наведении by Kocsten (@kocsten)
on CodePen.
