Изменяем стиль гиперссылок и их реакцию на наведение мышью

стиль гиперссылок и их реакция на наведение мышью

Поскольку весь Интернет строится на связях, то важным моментом становится стиль ссылки (например, якоря, или тега) как части общего дизайна сайта, стиля сайта и юзабилити.

Есть так много вариаций изменения ссылок по типу, цвету, реакции на наведение, цветовым сочетаниям, что я думал, было бы интересно перечислить некоторые из них. Некоторые покажутся вам знакомыми, в то время как другие могут быть необычными и удобными.

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

Итак, как сделать гиперссылку красочной и заметной, изменить цвет гиперссылки при наведении на нее мышкой...

Ниже приведу стили ссылок. Чтобы использовать нужный - найдите в таблице стили с цифрой пункты списка, указанного выше (например nth-of-type(5) - это элементы стилевого списка, создающие эффект, указанный в 5 пункте)

.link-list a:link, a:visited { color: darkblue; }

.link-list li:nth-of-type(2) a { text-decoration: none; }
.link-list li:nth-of-type(2) a:hover { text-decoration: underline; }

.link-list li:nth-of-type(3) a { }
.link-list li:nth-of-type(3) a:hover { text-decoration: none; }

.link-list li:nth-of-type(4) a { }
.link-list li:nth-of-type(4) a:hover { color: #E06C1F; text-decoration: none; }

.link-list li:nth-of-type(5) a {  }
.link-list li:nth-of-type(5) a:hover { color: #E06C1F; }

.link-list li:nth-of-type(6) a { border-bottom: dashed 1px; text-decoration: none; }
.link-list li:nth-of-type(6) a:hover { border-bottom: solid 1px; }

.link-list li:nth-of-type(7) a { border-bottom: solid 1px; text-decoration: none; }
.link-list li:nth-of-type(7) a:hover { border-bottom: dashed 1px; }

.link-list li:nth-of-type(8) a { text-decoration: none; }
.link-list li:nth-of-type(8) a:hover { color: #e06c1f; }

.link-list li:nth-of-type(9) a { text-decoration: none; padding: 1px 3px; }
.link-list li:nth-of-type(9) a:hover { background: #ccc; }

.link-list li:nth-of-type(10) a { border-bottom: solid 1px; text-decoration: none; }
.link-list li:nth-of-type(10) a:hover { border-bottom: dotted 1px; }

.link-list li:nth-of-type(10) a { border-bottom: dotted 1px; text-decoration: none; }
.link-list li:nth-of-type(10) a:hover { border-bottom: solid 1px; }

.link-list li:nth-of-type(11) a { text-decoration: none; }
.link-list li:nth-of-type(11) a:hover {
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

.link-list li:nth-of-type(12) a { text-decoration: none; }
.link-list li:nth-of-type(12) a:hover { text-decoration: overline; }

.link-list li:nth-of-type(13) a { text-decoration: none; }
.link-list li:nth-of-type(13) a:hover { text-decoration: overline underline; }

.link-list li:nth-of-type(14) a { text-decoration: none; }
.link-list li:nth-of-type(14) a:hover { border-bottom: solid 1px; border-top: solid 1px; }

.link-list li:nth-of-type(15) a { text-decoration: none; border: solid 1px transparent; padding: 1px; }
.link-list li:nth-of-type(15) a:hover { border: solid 1px; }

.link-list li:nth-of-type(16) a { background: #ccc; text-decoration: none; padding: 1px 3px; }
.link-list li:nth-of-type(16) a:hover { background: #e06c1f; color: white; }

.link-list li:nth-of-type(17) a { -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
.link-list li:nth-of-type(17) a:hover { color: #e06c1f; }

.link-list li:nth-of-type(18) a { text-decoration: none; }
.link-list li:nth-of-type(18) a:hover { font-weight: bold; }

.link-list li:nth-of-type(19) a { text-decoration: none; }
.link-list li:nth-of-type(19) a:hover { text-decoration: line-through; }

.link-list li:nth-of-type(20) a { text-decoration: none; }
.link-list li:nth-of-type(20) a:hover { font-style: italic; }

.link-list li:nth-of-type(21) a { text-decoration: none; }
.link-list li:nth-of-type(21) a:hover { font-variant: small-caps; }

.link-list li:nth-of-type(22) a { text-decoration: none; }
.link-list li:nth-of-type(22) a:hover { text-shadow: 2px 2px 2px #aaa; }

.link-list li:nth-of-type(23) a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
.link-list li:nth-of-type(23) a:hover { background: #ccc; }

.link-list li:nth-of-type(24) a { text-decoration: none; }
.link-list li:nth-of-type(24) a:hover:after { content: " (" attr(href) ") "; }

.link-list li:nth-of-type(25) a { background: #ccc; text-decoration: none; padding: 1px 3px; border-bottom: dashed 1px #777; }
.link-list li:nth-of-type(25) a:hover { background: #e06c1f; color: white; border-bottom: dashed 1px black; }

Поделитесь этой страницей!