Стили css ссылок: Свойства ссылок | htmlbook.ru

Содержание

Свойства ссылок | htmlbook.ru

Для управления видом различных ссылок в CSS используются псевдоклассы, которые
указываются после селектора A через двоеточие. В табл. 1
приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками
СвойствоОписание
A:linkОпределяет стиль для обычной непосещенной ссылки.
A:visitedОпределяет стиль для посещенной ссылки.
A:activeОпределяет стиль для активной ссылки. Активной ссылка становится при нажатии
на нее.
A:hoverОпределяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот
же эффект, что и применение стиля к селектору A. Поэтому
этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания
у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь
может сразу не догадаться, что текст, который он видит, является ссылкой. Все
ведь уже привыкли — раз подчеркивание используется, значит это ссылка.
Но при правильном применении отсутствие подчеркивания у ссылок может придать
определенный эффект сайту. Часто делается, что при наведении курсора, ссылка
становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект
одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { 
    text-decoration: none; /* Убирает подчеркивание для ссылок */
   } 
   A:visited { text-decoration: none; } 
   A:active { text-decoration: none; }
   A:hover {
    text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
    color: red; /* Цвет ссылки */
   } 
  </style>
 </head> 
 <body>
    <p><a href="1.html">Пример ссылки</a></p>
 </body> 
</html>

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания
и надчеркивания одновременно. При этом эффекте тонкие линии будут
появляться над и под ссылкой при наведении на нее курсора. Это достигается
применением свойства text-decoration: underline
overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
   <style type="text/css">
    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }
    A:hover { 
     text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
     color: red; /* Цвет ссылки */
   } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { text-decoration: none; }
   A:visited { text-decoration: none; }
   A:active { text-decoration: none; }
   A:hover { 
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: red; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки,
при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется
подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { color: blue; text-decoration: none; }
   A:hover { color: red; text-decoration: underline; }
   .link { color: blue; }
  </style>
 </head>
 <body>
  <p><a href="1.html"><span>Ссылка</span></a></p>
 </body>
</html>

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных
цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего
типа. Одни для меню, другие для текста. В этом случае создаем два или больше
класса со своими параметрами и применяем их по своему усмотрению. В примере
 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок,
где этот класс используются, изменятся автоматически.

Пример 5. Ссылки разных цветов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }
  </style>
 </head>
 <body>
  <p>| <a href="1.html">Ссылка 1</a> | 
   <a href="2.html">Ссылка 2</a> | 
   <a href="3.html">Ссылка 3</a> |</p>
  </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Разные ссылки на одной странице

CSS стиль ссылки — свойства и оформление анкора

О том, что представляют собой ссылки в HTML, я уже подробно рассказал. С точки зрения CSS работать с тегом <a> можно, как и с любым другим HTML-тегом. Для ссылок в таблицах стилей предусмотрено четыре специальных псевдокласса. От классов псевдоклассы отличаются тем, что по факту они прикреплены не к тегам, а к событиям или правилам. Изменить рамку поля, в которое сейчас вводится текст, подчеркнуть красным неправильно заполненные поля формы, задать отдельное оформление тексту, написанному на другом языке — всё это и многое другое могут псевдоклассы. От прочих типов селекторов они отличаются двоеточием в начале: :read-only.

Так вот, для оформления ссылок используется четыре псевдокласса:

  • :link — ссылка, по которой ещё не переходили.
  • :hover — ссылка, над которой сейчас находится курсор мыши.
  • :active — ссылка, которую в данный момент нажимает пользователь.
  • :visited — посещённая ссылка, то есть та, по которой уже переходили.

Всё остальное — уже изученный и ещё не пройденный материал, имеющий к ссылкам такое же отношение, как и к другим элементам HTML.

Код ниже демонстрирует оформление ссылок в зависимости от перечисленных выше четырёх событий.

<!DOCTYPE html>
<html>
<head>
    <title>Ссылки</title>
    <style type="text/css">
	a:link {
	 color: #DC143C;
	}
	a:hover {
	 color: #FF00FF;
	 text-decoration: none;
	 font-size: 18px;
	}
	a:active {
	 color: #FFFF00;
	 text-decoration: overline;
	}
	a:visited{
	 color: #228B22;
	 text-decoration: none;
	}
	</style>
</head>
<body>
<a href="#">Ссылка, ведущая сама на себя. Подведите к ней курсор, подержите нажатой кнопку мыши, отпустите. Всё это время наблюдайте за изменениями.</a>
</body>
</html>

Разберём стилевое оформление.

color: цвет — меняет цвет ссылки в зависимости от того, нажали её или нет, только подвели к ней курсор или уже по ней перешли.

text-decoration: none; — убирает заданное ссылкам по умолчанию подчёркивание текста.

font-size: 18px; — меняет размер шрифта ссылки в момент, когда к ней подводится курсор. В момент нажатия ссылки размер шрифта не меняется и остаётся равным 18px, так как пользователь, нажимая ссылку, по-прежнему не убирает с неё курсор мыши, а псевдоклассу :active другой размер шрифта не задан.

text-decoration: overline; — зато свойству :active задано отличное от псевдокласса :hover правило декорирования текста. Именно поэтому в момент нажатия ссылки появляется надчёркивание, тогда как при наведении курсора без щелчка ничего нет.

Полезные ссылки:

CSS стили ссылок,создание ссылок с помощью каскадных таблиц стилей,псевдоклассы CSS для придания ссылкам нужного внешнего вида

Позволю себе напомнить Вам, что ссылки одна из важнейших составляющих интернета. Попробуйте представить себе сайт без навигации, браузер без адресной строки и панели закладок, или электронную книгу без страницы с содержанием. Можно продолжить перечисление, но думаю, Вы и сами понимаете всю важность гиперссылок. Я уже писал о создании ссылок с помощью языка HTML. Однако, CSS стили позволяют более удобно проводить различные манипуляции с созданием ссылок и оформлением их внешнего вида.

CSS стили ссылок для работы используют псевдоклассы — это классы CSS, с помощью которых возможно динамическое изменение состояния веб-объектов во времени, или под воздействием посетителей. Применение псевдоклассов для изменения внешнего вида ссылки в определённый момент — характернейший пример работы последних. Вот основные из таких псевдоклассов (в примере сразу показан и листинг написания):

  • А:hover { параметр: значение; } — вид ссылки при наведённом курсоре мыши.
  • active — вид активной ссылки.
  • visited — вид посещённой ссылки.
  • link — ссылку ещё не посещали (по умолчанию).

Посмотрим, как это выглядит в коде и на скриншоте:

<html>
<head>
<title>hover</title>
<style type=»text/css»>
a:link {
color: #ff50dc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #018000;
}
a:visited {
color: #ff7625;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href=»#»>Неактивная ссылка</a></p>
<p><a href=»#»>Ссылка при наведённом курсоре</a></p>
<p><a href=»#»>Посещённая ссылка</a></p>
</body>
</html>

На рисунке видно, что убрано подчёркивание в непосешённых и посещённых ссылках, а при наведении курсора мыши подчёркивание появляется.

Теперь позволю себе напомнить понятие состояния ссылок.

  • Ссылка считается активной в момент нажатия на нее курсором мышки, данный момент очень незначителен по времени, и я не вижу смысла в применении данного значения.
  • Посещённой ссылка становится после перехода по ней на указанный адрес.
  • Неактивная ссылка — это ссылка в своём обычном состоянии, когда с ней не производится никаких действий.
  • Ну, и ссылка в момент наведения на неё курсора в объяснении не нуждается.

Управление ссылками с помощью стилей CSS возможно и без использования псевдоклассов. Делается это с помощью обращения CSS стилей ссылок к тегу А. Данный приём используется для задания ссылкам одинаковых параметров при любых состояниях (при желании не выделять ссылки из всего текста), или для определения лишь неактивных ссылок, с последующим использованием псевдоклассов. Допускается применение сокращённой записи при задании свойств CSS для тега А. Давайте посмотрим пример:

<html>
<head>
<title>link</title>
<style type=»text/css»>
a {color:black; text-decoration:none;}
a:hover {
text-decoration: none;
color: #018000;
background-color: #ffe7d8
}
a:visited {
color: #ff7625;
text-decoration:line-through;
}
</style>
</head>
<body>
<p><a href=»#»>Неактивная ссылка</a></p>
<p><a href=»##»>Ссылка при наведённом курсоре</a></p>
<p><a href=»###»>Посещённая ссылка</a></p>
</body>
</html>

Применение других параметров CSS стилей к оформлению ссылок, расположенных, например в составе меню, различных отступов, рамок, фонов и т.п. будет рассмотрено отдельно. А пока всё.

Стили ссылок в CSS, примеры создания ссылок CSS

В одном из уроков рассказывалось, как сделать ссылку в HTML. В этом уроке мы поговорим о том какие стили ссылок используются в CSS, и на примерах научимся с ними работать.

Как задать стиль ссылке в CSS?

В CSS можно изменить любое свойство ссылок (цвет, шрифт, цвет фона). Также для ссылок можно настроить стили, в зависимости от их состояния:

  • a:link — не посещенная ссылка;
  • a:visited — посещенная ссылка;
  • a:hover — ссылка, над которой находится курсор мыши;
  • a:active — ссылка в момент щелчка мыши.

Пример:

a:link {font-size:12px; color:#ff0000;}
a:visited {font-size:12px; color:#00ff00;}
a:hover {font-size:12px; color:#ff00ff;}
a:active {font-size:12px; color:#0000ff;}

При формировании стилей ссылок следует соблюдать правила:

1. «a:hover» должен определяться только после «a:link» и «a:visited»;
2. «a:active» должен определяться после «a:hover».

При оформлении текста ссылки используют также свойства:

1. text-decoration — задает подчеркивание текста ссылки.

Атрибуты:

  • blink — устанавливает мигающий текст;
  • line-through — создает перечеркнутый текст;
  • overline — линия проходит над текстом;
  • underline — устанавливает подчеркнутый текст;
  • none — отменяет все заданные по умолчанию эффекты;
  • inherit — значение наследуется у родителя.

Пример:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

2. background-color — задает цвет фона ссылок.

Пример:

a:link {background-color:#b2аа99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#gg704d;}
a:active {background-color:#ff7ddd;}

Таким образом, мы рассмотрели стили ссылок в CSS. При создании сайта знать, как работать со ссылками просто необходимо. Стили CSS позволяют предать ссылкам определенное визуальное отображение, что также весьма полезно.

Понравилось? Поделитесь с друзьями!

css стили текста ссылки — Все о Windows 10


На чтение 6 мин. Просмотров 68 Опубликовано

Стили CSS для ссылок в HTML

Необычное оформление ссылок внутри текста, которое сделает ваш сайт более информативным и повысит вероятность перехода по этим ссылкам.

HTML и CSS для красивого оформления ссылок внутри текста.

*Стили для ссылок освещу в нескольких постах, чтобы было наглядно и понятно. В конце каждой странице link на другие стили ссылок, выбирайте то, что вам понравится.

Начнём с самого примера.

Так выглядит ссылка внутри текста на любом сайте: ссылка.

А так она может выглядеть на вашем сайте: наведи на меня!

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

В первом кодовом блоке содержится текст HTML, а во втором стили для link CSS, которые применяются для создания эффекта градиентной заливки.

HTML текст для описания блока с содержимым и указанием тега с классом.

Можете копировать весь текст и размещать на своем сайте в текстовом редакторе контента.

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками

СвойствоОписание
A:linkОпределяет стиль для обычной непосещенной ссылки.
A:visitedОпределяет стиль для посещенной ссылки.
A:activeОпределяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hoverОпределяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A . Поэтому этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover .

Пример 2. Использование подчеркивания в ссылках

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.

Пример 5. Ссылки разных цветов

Результат данного примера показан на рис. 1.

CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .

Оформление гипертекстовых ссылок

  • Содержание:
  • 1. Псевдоклассы состояний гипертекстовых ссылок
  • 2. Выборка отдельных ссылок
  • 3. Подчеркивание ссылок
  • 4. Изображения для ссылок
  • 5. Использование фонового изображения
  • 6. Ссылки-кнопки
  • 7. Примеры оформления ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:

Не посещенная — a:link
Посещенная — по которой уже выполнялся переход — a:visited
Не нажатая — над которой находится указатель мыши — a:hover
Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

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

2. Выборка отдельных ссылок

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

3. Подчеркивание ссылок

Добавление подчеркивания только при наведении на ссылку:

Внешний вид нижней границы ссылки:

4. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left . Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.

Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Ссылки-кнопки

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

Стилизация ссылок с помощью CSS

Ссылка имеет четыре различных состояния: обычное, посещенная, активная и наведение. Эти четыре состояния ссылки могут быть по-разному стилизованы через свойства CSS с использованием псевдоклассов элемента привязки в зависимости от того, в каком состоянии они находятся.

Ниже рассмотрены псевдоклассы CSS, связанные с тегом HTML <a>, которые можно использовать для определения различных стилей для разных состояний гиперссылки.

  1. a:link — устанавливает стили для обычных или не посещенных ссылок, на которые не наведен указатель мыши.
  2. a:visited — устанавливает стили для ссылки, которую посетил пользователь, но на нее не наведен указатель мыши.
  3. a:hover — устанавливает стили для ссылки, когда пользователь наводит на нее указатель мыши.
  4. a:active — устанавливает стили для ссылки, по которой происходит клик.

Вы можете указать любое свойство CSS, например, color, font-family, background и т. д. для каждого из этих селекторов, чтобы переопределить стиль ссылок.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
}

Порядок, в котором вы устанавливаете стиль для нескольких состояний ссылок, важен, поскольку то, что определяет последний, имеет приоритет над более ранним кодом CSS.

Стандартные стили ссылок

Во всех основных веб-браузерах ссылки на веб-страницах имеют подчеркивание и используют цвета ссылок браузера по умолчанию, если вы не устанавливаете стили специально для них.

блок 1

Например, цвета ссылок по умолчанию в веб-браузерах на основе Gecko, таких как Firefox, — синий для не посещенных, фиолетовый для посещенных и красный для активной ссылки.

Установка цвета ссылок в CSS

Для установки цвета ссылки достаточно использовать селектор а. Однако считается хорошей практикой добавить стили для посещенных ссылок и состояния hover (момент, когда курсор находится над ссылкой). Это делается для удобства пользователя, который всегда может видеть какие ссылки он уже посетил и на какие может перейти.

Как убрать подчеркивание у ссылок

CSS-свойство text-underline обычно используется для удаления или добавления подчеркивания для ссылок. В следующем примере демонстрируется, как удалить или установить свойство text-underline для разных состояний гиперссылки.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
  text-decoration: none;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
  text-decoration: underline;
}

блок 3

Links ссылки в CSS при наведении. Уроки для начинающих академия

С CSS, ссылки могут быть стилизованы по-разному.

Text Link
Text Link
Link Button
Link Button

Укладка ссылки

Ссылки могут быть стилизованы под любое свойство CSS (например, color, font-family, background и т.д.).

Пример

a {
    color: hotpink;
}

Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.

Четыре ссылки состояний:

  • a:link — Обычная, непосещаемая ссылка
  • a:visited — ссылка, которую посетил пользователь
  • a:hover — ссылка, когда пользователь мыши над ним
  • a:active — Ссылка момент щелчка

Пример

/* unvisited link */
a:link {
    color: red;
}

/* visited
link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
   
color: blue;
}

При задании стиля для нескольких состояний ссылок существуют некоторые правила заказа:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Оформление текста

Свойство text-decoration в основном используется для удаления подстрочных ссылок:

Пример

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Цвет фона

Свойство background-color может использоваться для указания цвета фона для ссылок:

Пример

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

Дополнительные кнопки-ссылки

В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:

Пример

a:link, a:visited {
    background-color: #f44336;
   
color: white;
    padding: 14px 25px;
   
text-align: center;
    text-decoration: none;
   
display: inline-block;
}

a:hover, a:active {
   
background-color: red;
}

Другие примеры

Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.

Advanced-создание кнопки связи с границами
Еще один пример создания полей/кнопок ссылок.

Изменение курсора
Свойство Cursor указывает тип отображаемого курсора.
В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).

37 Рекомендации CSS по стилям ссылок для современных веб-браузеров

Примеры оформления CSS креативных стилей ссылок, которые помогут вам создавать визуально привлекательные стили ссылок.

С самого начала истории браузеров, то есть почти в середине 1990-х годов, стиль ссылок остается почти таким же. CSS-дизайн стиля ссылок по умолчанию —

.

  • Ссылки подчеркнуты
  • При посещении ссылки она будет фиолетовой
  • Непросмотренные ссылки будут выделены синим цветом.
  • Важные ссылки, такие как кнопки призыва к действию, имеют контур вокруг них

Люди привыкли к этим основным стилям ссылок.При разработке стиля ссылок мы должны быть осторожны, чтобы не уйти далеко от этой характеристики. Например, вы можете поиграть с цветами ссылок, шириной штриха подчеркивания, небольшой анимацией, чтобы сделать ссылку и кнопки призыва к действию уникальными по сравнению с обычным дизайном. В этом списке мы собрали лучшие практики CSS для стиля ссылок, которые подходят для современных мобильных пользователей и браузеров.

Кнопки и ссылки начальной загрузки Colorlib

В этом полезном наборе кнопок начальной загрузки от команды Colorlib есть все типы кнопок и стили ссылок CSS, разработанные специально для вас.В этом пакете представлены различные стили, анимация и размеры, чтобы упростить работу разработчика.

Все, что вам нужно сделать, это выбрать понравившийся дизайн и отредактировать его в соответствии с требованиями. Создатель сохранил файл кода и структуру кода как можно проще, чтобы разработчик мог легко определить стиль элемента, который ему нужен, и мог быстро понять код.

Информация / Скачать демо

Компиляция стилей ссылок CSS

Эта компиляция стилей ссылок CSS дает вам десять различных стилей ссылок CSS.Если вы хотите выделить простую текстовую ссылку или хотите, чтобы кнопка со ссылками выглядела стильно, эта подборка даст вам несколько свежих идей. Еще одно преимущество этой компиляции CSS стиля ссылок заключается в том, что все проекты создаются исключительно с использованием сценариев HTML5 и CSS3. Таким образом, вы можете легко использовать код и создать собственный дизайн за секунды. Создатель сделал анимацию максимально простой, чтобы стиль ссылки легко вписывался в любую часть веб-сайта и приложений.

Информация / Скачать демо

Эффект ссылки на меню для WordPress

Как следует из названия, этот CSS-стиль ссылок предназначен для меню.Создатель специально упомянул, что этот стиль ссылок предназначен для WordPress, и это правда. Поскольку вся концепция дизайна создается исключительно с использованием сценария CSS, вы можете использовать этот код даже на существующем веб-сайте WordPress. Дизайн по умолчанию аккуратный, и анимация также гладкая, поэтому нет необходимости редактировать код, если у вас нет особых требований.

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

Информация / Скачать демо

Эффект мигания ссылки

Этот стиль ссылок CSS впечатлит любителей ретро-стиля. Когда пользователь наводит курсор на ссылку, линия плавно перемещается к концу и продолжает бесшумно мигать. Зеленый цвет и эффект мерцания добавляют аутентичности ретро-стилю. Вы можете разместить этот стиль ссылки на любом веб-сайте из-за его простого дизайна. Создатель сохранил сценарий кода достаточно простым, используя только сценарии CSS и HTML.Таким образом, вы можете изменить внешний вид и без проблем использовать стиль ссылки в своем дизайне.

Информация / Скачать демо

Link Hover

В этом наборе разработчик предоставил нам множество дизайнов стилей ссылок. Вы получаете около пятнадцати дизайнов стиля ссылок, и все они созданы исключительно с использованием скрипта CSS3. Есть эффект наведения как для текстовых ссылок, так и для кнопок CSS. Просто выберите тот, который вам нравится, и поработайте над ним, чтобы он идеально вписался в ваш дизайн.Все эффекты анимации тонкие и чистые, поэтому они не займут много места на экране и много времени для загрузки. Поскольку разработчик использовал сценарий CSS3, вы получаете множество вариантов настройки. Кроме того, вы можете легко интегрировать эти эффекты на любые современные веб-сайты, внеся несколько изменений в код.

Информация / Скачать демо

Spring Bounce Hover Effect

Этот эффект ссылки будет хорошим выбором для блогов и текстовых ссылок в абзацах. Для текстовых ссылок используется элемент стиля подсветки, который немного подпрыгивает, когда пользователь наводит курсор на ссылку.Поскольку вся анимация тонкая и аккуратная, пользователей не раздражает эффект отскока текста. Кроме того, вся концепция разработана с использованием новейшего скрипта CSS. Следовательно, вы можете легко использовать этот фрагмент кода на своем веб-сайте или в приложении без каких-либо проблем.

Информация / Скачать демо

Эффект подчеркивания ссылки

Подчеркивание — это один из самых простых и понятных дизайнов ссылок. Создатель добавил небольшую анимацию к подчеркиванию, чтобы сделать дизайн еще более привлекательным.Хотя эффект ссылки подчеркивания используется для тегов заголовков, вы также можете использовать его для обычного текста и текстов в абзацах. Дизайн подчеркивания и эффекты созданы исключительно с помощью скрипта CSS. Следовательно, весь опыт гладкий и плавный. Все, что вам нужно сделать, это настроить код в соответствии с вашими требованиями и использовать его в своем проекте.

Информация / Скачать демо

Эффект ссылки меню

Эффект ссылки на меню — это распространенный эффект прокрутки текста, который вы, возможно, видели на многих творческих веб-сайтах.Использование светлых и темных контрастных цветов и эффектов плавного перехода делает этот эффект ссылки визуально привлекательным. Сценарий кода этого примера стиля ссылки очень прост, как и его дизайн. Таким образом, вы можете легко использовать код и использовать его на своем веб-сайте. Поскольку весь скрипт кода доступен вам в редакторе CodePen, вы можете редактировать и визуализировать код в самом редакторе кода.

Информация / Скачать демо

Ссылка на чистый CSS с эффектом подчеркивания радуги

Этот пример можно использовать для текстовых ссылок в области основного содержимого.По мере того, как современный дизайн типографики становится все более и более популярным, также становится важным придание модного вида текстовым ссылкам. В самом дизайне по умолчанию вы можете увидеть, как красиво подчеркнутый текст ссылки цвета радуги выглядит на темном фоне креатива. Весь стиль ссылки разработан исключительно с использованием кода CSS3. Следовательно, вы можете легко редактировать код и использовать его на своем веб-сайте / в приложении в кратчайшие сроки. Говоря о узорах, взгляните на нашу коллекцию фоновых узоров, чтобы найти более крутые узоры, как в этом примере.

Информация / Скачать демо

Эффекты ссылки CSS

Создатель Сэм дал несколько эффектов CSS-ссылок, запускаемых при наведении курсора. Все дизайны просты и аккуратны, поэтому вы можете легко использовать эффекты этой ссылки в любой части вашего сайта. Кроме того, все дизайны создаются с использованием скрипта CSS3. Следовательно, редактирование и обработка кода станут более удобными. Разработчики могут просто выбрать понравившийся дизайн и начать работу над кодом. Поскольку создатель отобразил все эффекты на одной странице, код выглядит длинным.Когда вы выбираете только один эффект, код будет коротким и понятным.

Информация / Скачать демо

Вдохновение для эффектов наведения курсора на ссылки в меню

В этом примере вы также получаете различные типы CSS-дизайнов в стиле ссылок, запускаемых при наведении курсора. Хотя этот пример предназначен для ссылок меню, вы также можете использовать некоторые эффекты для других типов ссылок. На момент написания этого поста в этом паке было восемь дизайнов. Каждый дизайн уникален и использует разные эффекты. Некоторые эффекты очень креативны, а некоторые просты.Поэтому убедитесь, что вы проверили их все, прежде чем выбрать один. Весь сценарий кода предоставляется в виде загружаемого файла, чтобы помочь вам эффективно использовать код на вашем веб-сайте или в приложении.

Информация / Скачать демо

Эффекты ссылок

CSS Автор uNick

Если вы ищете привлекающий внимание дизайн в стиле ссылок, этот может вас впечатлить. Создатель создал около восемнадцати эффектов наведения в стиле ссылок. Каждый из них немного отличается от других, поэтому у вас есть достаточно вариантов в этом наборе.Все эффекты просты и легко устанавливаются даже на многолюдной странице. Одним из наиболее значительных преимуществ использования дизайнов с простыми эффектами является то, что вам не нужно изменять другие элементы на странице.

Информация / Скачать демо

Кнопка наведения

Хотя этот CSS-стиль ссылок изначально предназначен для кнопок, вы можете использовать его и для других типов ссылок. При наведении курсора на ссылку стрелка расширяется и покрывает всю область текстовой ссылки. Таким образом, пользователь будет точно знать тексты, на которые есть ссылки.Кроме того, эффект анимации плавный и быстрый, поэтому у пользователя не возникнет проблем с взаимодействием. Как и большинство других CSS-дизайнов в стиле ссылок, этот также создан с использованием скрипта CSS3. Если вы разработчик, вы можете легко использовать этот код даже на своем существующем веб-сайте или целевой странице.

Информация / Скачать демо

Стиль магнитной ссылки CSS UI-эффект

Если вы хотите сделать ссылки интерактивными и отличать важные ссылки от других ссылок, подобный дизайн вам пригодится.В дизайне по умолчанию создатель использовал CSS-эффект стиля магнитной ссылки для контактной информации. Ссылка перемещается синхронно в соответствии с перемещением курсора. Эффект анимации сделан так, чтобы эффект происходил в определенном радиусе и не мешал другим элементам на веб-странице. Чтобы создать этот интерактивный дизайн CSS в стиле ссылки, создатель использовал фреймворк CSS3 и Javascript. Весь фрагмент кода, использованный для создания этого дизайна, предоставляется вам, чтобы вы могли легко использовать дизайн.

Информация / Скачать демо

Текст ссылки на фрагмент

Создатель Маттиа Асторино дал нам простой, но привлекательный CSS-дизайн в стиле ссылок. При наведении курсора на ссылку текст переворачивается, показывая оставшееся сообщение. Используя подобный дизайн CSS в стиле ссылок, вы можете курировать свою аудиторию, а также четко указывать цель ссылки. В презентационных целях создатель использовал эффект переключения цвета фона. Но вы можете обрезать код и использовать только эффект анимации стиля ссылки.Самое приятное в дизайне то, что он сделан исключительно с использованием скрипта CSS3 и правильно структурирован. Следовательно, разработчики могут легко работать с кодом.

Информация / Скачать демо

Эффекты при наведении курсора при наведении курсора на Box-shadow

Из самого названия вы можете сделать вывод, что CSS-стиль ссылок в этом дизайне предназначен для кнопок. В этом примере приведены семь типов эффектов анимации наведения. Все семь из них гладкие и имеют современный вид. Следовательно, вы можете использовать эти эффекты на любом креативном и модном веб-сайте.Создатель правильно структурировал код, а также дал примечания, чтобы вы могли легко понять код. Если вы новичок, такие фрагменты кода помогут вам легко понять функции.

Информация / Скачать демо

Ссылка со стрелкой

Стиль CSS

Arrowed Link почти аналогичен упомянутому выше эффекту анимации при наведении курсора на кнопку. Вместо того, чтобы анимировать всю текстовую ссылку, создатель анимировал только стрелку в ссылке. Если вы создаете дизайн ссылок для формы или мастера, CSS-дизайн в стиле ссылок, подобный этому, будет хорошим выбором.Эффект анимации прост и может быть легко размещен в любой части веб-сайта или приложения. Внеся несколько изменений в код, вы можете легко использовать этот код в своем дизайне. Если вас интересуют дизайны стрелок и анимация стрелок, взгляните на нашу коллекцию дизайнов стрелок CSS.

Информация / Скачать демо

Одинарный элемент Link Styling

Одноэлементный дизайн ссылки лучше всего подходит для важных ссылок. Если вы используете текстовые ссылки для направления трафика с одной веб-страницы на другую, такой дизайн обязательно привлечет внимание пользователя.Эффект анимации по умолчанию смелый и привлекательный, который также в ярко-красной цветовой гамме легко привлекает к себе внимание. Смелые и привлекательные элементы всегда будут лучше работать на целевой странице; Поскольку вам нужно доставить все содержимое и преобразовать пользователя за короткий промежуток времени, такая классная анимация поможет. Еще одним преимуществом этого дизайна является то, что он полностью выполнен с использованием скрипта CSS3. Чтобы получить более привлекательный дизайн целевой страницы, взгляните на нашу бесплатную коллекцию шаблонов целевой страницы с дизайном, ориентированным на конверсию.

Информация / Скачать демо

Тонкие анимации ссылок

В этом наборе анимаций «Тонкие ссылки» вы получаете семь анимационных эффектов. Все семь эффектов анимации просты и аккуратны, поэтому анимация отлично смотрится на всех типах веб-сайтов. Если вы используете текстовые ссылки в своем блоге, вы можете использовать дизайн подчеркивания, приведенный в этом наборе. По умолчанию все текстовые ссылки в этом дизайне сделаны крупнее и жирнее для облегчения взаимодействия. В насыщенной контентом среде более жирные ссылки сделают их заметными.Все семь анимационных эффектов созданы с помощью скриптов CSS3 и HTML5. Простая структура кода позволила ускорить загрузку эффектов анимации. В этом дизайне даже есть красочные анимационные эффекты, исходя из ваших требований к дизайну, выберите тот, который вам нравится. Чтобы получить более творческие эффекты анимации, взгляните на нашу коллекцию примеров анимации CSS, созданную творческими разработчиками.

Информация / Скачать демо

Крутые идеи ссылок на CSS3

Cool CSS3 Link Ideas дает вам профессиональное вдохновение для анимации ссылок.Вы можете использовать эти идеи анимации как для текстовых ссылок, так и для кнопок. Все примеры анимации, приведенные в этом наборе, происходят вокруг текста, поэтому они не занимают много места на экране. В этом наборе разработчик предоставил вам десять эффектов плавной анимации. Этот профессиональный анимационный эффект идеально впишется в любую часть сайта. Поскольку это демонстрационный дизайн, все анимации сделаны крупнее и смелее. Но вы можете масштабировать размер в соответствии с вашими требованиями к дизайну. Сделав несколько оптимизаций, вы можете использовать этот дизайн даже на своем существующем веб-сайте.

Информация / Скачать демо

Стили My Link, автор Tricia Rodriguez

Современные анимационные эффекты не только творческие, но и логически разработаны, чтобы сделать их удобнее для пользователей. Если вы ищете дизайн такого логичного стиля ссылок для своего веб-сайта или приложения, это то, что вам нужно. Разработчик дал вам дизайн как для текстовых ссылок, так и для ссылок меню. Для более плавного эффекта анимации разработчик использовал HTML5, CSS3 и Javascript. Весь сценарий кода, использованный в этом дизайне, доступен вам непосредственно в редакторе CodePen.Прежде чем использовать этот дизайн в своем проекте, вы можете отредактировать и визуализировать результат в самом редакторе CodePen. Если вы ищете дизайн меню и навигацию по меню, наша коллекция дизайнов меню CSS даст вам некоторое вдохновение.

Информация / Скачать демо

Стили ссылок от J2

Разработчик предоставил вам дизайн ссылок для кнопок призыва к действию. В этом дизайне используются в основном плоские дизайны, поэтому он идеально подходит для всех типов веб-сайтов и приложений.Поскольку это предназначено исключительно для всех кнопок призыва к действию, все эффекты анимации происходят внутри кнопки; что делает этот дизайн не лучшим вариантом для текстовых ссылок. Разработчик использовал CSS3 и Javascript для создания этих анимационных эффектов. Поскольку большинство этих анимационных эффектов можно сделать с помощью CSS3, вы можете обрезать код, если хотите. Перейдите по информационной ссылке ниже, чтобы получить практический опыт работы с кодом.

Информация / Скачать демо

Анимация заголовка

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

Информация / Скачать демо

Толщина анимированного шрифта при наведении курсора

Толщина анимированного шрифта при наведении курсора — лучший эффект как для ссылок меню, так и для обычных текстовых ссылок. В дизайне по умолчанию текстовые ссылки становятся полужирными, когда пользователь наводит курсор на текст. Анимация постепенно переходит от персонажа к персонажу, что очень привлекательно. Если вы используете этот дизайн для обычных текстовых ссылок, вы можете сделать так, чтобы анимация жирным шрифтом отображалась на всем слове. Чтобы дать вам четкий эффект анимации, в этом дизайне разработчик использовал скрипт SCSS и HTML5.Анимация по умолчанию занимает несколько пробелов по бокам, поэтому обязательно учтите это, когда покидаете место.

Информация / Скачать демо

CSS-анимации для интерактивных элементов

Разработчик Стас Мельников дал нам девять различных анимаций для ссылок. В этом наборе вы также получаете стиль ссылок как для ссылок, так и для кнопок. Все девять анимационных эффектов короткие и приятные, поэтому пользователю не придется долго ждать. Эти тонкие эффекты анимации будут указывать на наличие ссылки на пользователя, чтобы вы могли направить пользователя в нужное место.Все эти эффекты созданы с использованием скрипта CSS3, поэтому они гладкие и плавные. Кроме того, вы можете ожидать такой же плавной производительности и на мобильных устройствах. Если вы ищете стиль ссылок для своего адаптивного дизайна веб-сайта, этот дизайн идеально подойдет.

Информация / Скачать демо

Ссылка «Подробнее»

Дизайн ссылок «Подробнее» — идеальный вариант для шаблонов веб-сайтов и веб-сайтов в минималистском стиле. Благодаря простым эффектам анимации и привлекательным цветам этот дизайн ссылок привлечет внимание пользователя даже на веб-страницах с большим содержанием текста.Если вы ведете блог с простой минималистичной темой или шаблоном, подобный дизайн сделает ваш блог более привлекательным для ваших читателей. Поскольку этот дизайн создается исключительно с использованием сценария CSS3, вы можете легко использовать его даже на своем существующем веб-сайте. Внеся несколько изменений в код, вы можете изменить цвет анимации в соответствии с вашей цветовой схемой.

Информация / Скачать демо

Ссылка Hover Arrow Idea

Link Hover Arrow Idea — это практически применимый дизайн ссылок, который вы можете использовать для обычных текстовых ссылок в вашем контенте.Тексты со ссылкой выделяются синим цветом. При наведении курсора на текст цвет наложения меняется на стрелку, указывающую на перенаправление на другую страницу. Переходы плавные и чистые, что легко заметить пользователям. Как и дизайн ссылки «Читать дальше», упомянутый выше, этот также разработан исключительно с использованием скрипта CSS3. Все, что вам нужно сделать, это скопировать код и использовать его в своем веб-дизайне. Поскольку это только дизайн CSS, часть настройки не займет много времени.

Информация / Скачать демо

Эффекты при наведении курсора на подчеркивание текста

Этот стиль текстовой ссылки почти аналогичен упомянутой выше идее со стрелкой при наведении курсора.Но в этом вы получите другой эффект анимации. Разработчик предоставил вам два типа анимационных эффектов. Один — это полноцветная оверлейная анимация, а другой — быстрая гладкая линейная анимация. Не только дизайн, но и структура кода также остается очень простой. Оба эффекта анимации созданы исключительно с использованием скрипта CSS3. Сделав несколько оптимизаций, этот дизайн можно легко вписать в ваш веб-сайт или приложение. Поскольку это дизайн на основе CSS3, вы можете без колебаний использовать в нем любые современные цвета.

Информация / Скачать демо

Link Highlight Эффект наведения / щелчка

Типографика используется как часть современного веб-дизайна, что позволяет вам ясно делиться своими мыслями с пользователями. Если вы используете разорванную сетку или асимметричный дизайн в макете своего веб-сайта, этот стиль ссылок добавит дополнительного богатства вашему дизайну. Эффект очень простой, поэтому он легко помещается в любой части веб-сайта. Подчеркивание делается больше и толще, чтобы пользователь мог ясно видеть важность выделенного текста.Умная обработка сценария кода CSS3 дает вам простой, но эффективный стиль ссылок. Ознакомьтесь с нашими бесплатными современными шаблонами веб-дизайна, чтобы бесплатно получить новейший шаблон веб-сайта премиум-качества.

Информация / Скачать демо

Анимация на холсте при привязке клика

В этом дизайне вы получаете забавный эффект анимации для текстовых ссылок. Щелкнув ссылку, вы получите привлекательный цветной всплеск. Этот заманчивый эффект анимации ограничивает его использование только на случайных и творческих веб-сайтах.Поскольку это сложный красочный анимационный эффект, разработчик использовал в дизайне фреймворки HTML5, CSS3 и Javascript. Если вы собираетесь использовать этот дизайн на своем веб-сайте, вам нужно сделать несколько оптимизаций, чтобы он отлично работал на вашем веб-сайте. Разработчик поделился с вами всей структурой кода, чтобы вы могли легко работать с этим дизайном.

Информация / Скачать демо

Эффект изогнутого звенаz

Само название говорит само за себя, линия, обозначающая текстовую ссылку, изгибается при наведении курсора на ссылку.Волнистая анимация гладкая и чистая, поэтому пользователь может четко видеть синусоидальные волны при наведении курсора на текст. Если вы используете этот эффект на музыкальном веб-сайте, он будет идеально соответствовать основной теме шаблона. Как и большинство других дизайнов стилей ссылок в этом списке, он также разработан с использованием скрипта CSS3. Вы можете легко добавить его на свой существующий веб-сайт. Поскольку эффект по умолчанию прост и привлекателен, вы можете использовать этот эффект даже для заголовков на своих веб-страницах.

Информация / Скачать демо

Эффект строки при наведении курсора на меню

Хотя этот дизайн предназначен для меню навигации, вы также можете использовать его для других текстовых ссылок.Эффект простой линейной анимации этого дизайна делает его идеальным для всех типов веб-сайтов. В предыдущем CSS-стиле ссылок мы видели эффект волнистой линии. В этом дизайне разработчик использовал концепцию синусоидальной волны. Как и показания датчика ЧСС, линия движется в виде волны. Дизайн этого стиля ссылок по умолчанию будет хорошим вариантом для веб-сайтов медицинских организаций. Поскольку этот дизайн создается исключительно с использованием сценария CSS3, интеграция и настройка будут легкими для разработчика.

Информация / Скачать демо

Прыгающая перемычка

Прыгающая ссылка при наведении курсора — это дизайн ссылки в стиле навигации. Если вы добавляете кучу ссылок в одном месте, например, в нижнем колонтитуле, этот дизайн будет идеальным вариантом. Синий квадратный маркер плавно перемещается в соответствии с перемещением курсора. Синий маркер легко расширяется в зависимости от длины текста. Чтобы создать этот стиль интерактивной ссылки, разработчик использовал HTML, CSS3 и Javascript. Работа с этим дизайном может занять немного больше времени, потому что вам нужно обработать три сценария и оптимизировать их для вашего дизайна.Но этот дизайн стоит затраченных усилий.

Информация / Скачать демо

Другой концепт меню

Это еще один линейный дизайн ссылок, который можно использовать как для меню навигации, так и для текстовых ссылок. Хотя эффект прост, для этого разработчик использовал HTML, CSS и Javascript. Но вы можете обрезать код в зависимости от предпочтительной структуры кода. При наведении курсора на ссылку строка плавно расширяется до конца текста. Эффект простой и элегантный, поэтому он может поместиться в любом пространстве и любой части веб-сайта.Все, что вам нужно сделать, это поработать над кодом, чтобы он соответствовал вашим потребностям, и использовать его на своем веб-сайте или в своем проекте.

Информация / Скачать демо

Эффект наведения слева направо на цвет текста

Эффект наведения курсора слева направо на цвет текста почти аналогичен дизайну концепции меню, упомянутому выше. В этом дизайне анимированная линия имеет красочный эффект. Помимо линейной анимации в этом дизайне вы также получаете анимацию слова. Этот дизайн выполнен с использованием скрипта CSS3, поэтому вы можете использовать в нем свою собственную современную цветовую схему и эффекты анимации.Разработчик поделился сценарием кода непосредственно с вами, чтобы вы могли легко работать с этим дизайном и использовать его в своем дизайне.

Информация / Скачать демо

Эффекты при наведении курсора на креативное меню

Creative Menu Hover Effects — это творческая форма вышеупомянутого дизайна Menu Concept. Сделав несколько настроек, этот стиль ссылки можно использовать и для обычных текстовых ссылок. Вся анимация появляется только тогда, когда пользователь наводит курсор на ссылку. Чтобы указать ссылку, вы можете использовать дизайн подчеркивания и эффект анимации, который может быть более эффективным, чем исходный дизайн.Этот дизайн также создан исключительно с использованием скрипта CSS3, поэтому у вас есть множество вариантов настройки. Кроме того, работать с этим дизайном также будет легко.

Информация / Скачать демо

46 CSS Link Hover Effects

Коллекция отобранных вручную бесплатных HTML и CSS-эффектов ссылок примеров кода с : hover и : active state. Обновление коллекции за февраль 2020 года. 13 новинок.

  1. CSS Панировочные сухари
  2. CSS стрелки
О коде

Laser Revealed Title Ссылка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Уилл Бойд
О коде

Отображение URL-адресов ссылок

Как отобразить атрибут href ссылки рядом с текстом ссылки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Мэри Лу
О коде

Простая анимация наведения курсора на линии CSS для ссылок

Пара простых и тонких анимаций наведения курсора на линии для ссылок на основе CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Шунья Койдэ
О коде

CSS-анимация при наведении курсора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Адам Кун
О коде

Анимированные ссылки SVG

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Аарон Икер
О коде

Анимация наведения ссылки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Переменный переход подчеркивания с усиленным подчеркиванием

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Cojea Gabriel
О коде

Анимация подчеркивания — ссылка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Сикрити Дакуа
О коде

Взаимодействие при наведении курсора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Ссылка Hover Flash

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Анимация подчеркивания

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Кэтрин Като
О коде

Заливка ссылки при наведении

Эффекты наведения ссылки, которые заполняют ссылку подчеркиванием или сквозной линией с использованием переходов CSS и свойства clip-path .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Эффект подчеркивания ссылки

Анимированный эффект подчеркивания / границы ссылки. Отредактируйте transform-origin , чтобы изменить начало анимации. В настоящее время он установлен влево.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Кристофер Кирк-Нильсен
О коде

Полупрозрачная линия CurrentColor Link Underline

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Эффект наведения на пружину / отскок

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Сил ван Дипен
О коде

Стиль ссылки

Исследование стилей ссылок без классов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: -

Автор
  • Стас Мельников
О коде

Интерактивные элементы

CSS-анимации для интерактивных элементов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: кнопка r.css, r-link.css

Автор
  • Стас Мельников
О коде

Эффект ссылки HTML и CSS

Ссылка «Подробнее» , эффект в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О коде

Пометить # ссылки!

Стили неработающих ссылок.Пометить # ссылки с помощью CSS! Никогда не забывайте снова a href = "#" заполнитель!

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

Автор
  • Джефф Грэм
О коде

Эффект связи

Эффект волнистости ссылок HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

Автор
  • Джулия Маларода
О коде

Ссылка с градиентным фоном

Ссылка с градиентным фоном при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

Автор
  • Джеспер Стрэндж Клитгаард Кристиансен
О коде

Вес анимированного шрифта при наведении курсора

Тонкое звено выделено жирным шрифтом.

Автор
  • Антуанетта Янус
О коде

Многополюсный канал

Эффект наведения многострочной ссылки.

Автор
  • Габриэль Ви
О коде

Стрелка ссылки

Ссылка на наведение стрелки.

Автор
  • Колин Хорн
О коде

Анимация с градиентом подчеркивания

Использование градиента фона css и анимации css позволяет анимации подчеркивания ссылки переноситься на несколько строк.Раньше этого можно было достичь с помощью элементов : псевдо . Однако сделать это на нескольких строках оказалось непросто.

Автор
  • Тьяго Александр Лопес
О коде

Cool Hover Effect С смешанным режимом наложения

Это круто, потому что вам не нужно менять цвет ссылки на : hover . mix-blend-mode в :: after инвертирует его за вас.

Демонстрационный GIF: Underline Hover

Underline Hover

HTML и CSS эффект подчеркивания при наведении курсора.
Автор Элвин ван ден Хейзел
12 июля 2017 г.

Демонстрационное изображение: Animate Underline Wavy

Animate Underline Wavy

Вот крутые изгибы подчеркивания, которые нравятся людям.
Сделано Дэвидом Дарнсом
10 июля 2017 г.

Демо-изображение: необычное подчеркивание ссылки текст-тень

Необычное подчеркивание ссылки текст-тень

HTML и CSS модный text-shadow подчеркивание ссылки.
Сделано Райаном
1 июля 2017 г.

Демонстрационный GIF: Follow Along Links

Follow Along Links

Наведите указатель мыши на ссылки, и он будет следовать за курсором, выделяя ссылки по мере продвижения!
Сделано Кэтрин Като
23 июня 2017 г.

Демонстрационный GIF: стили ссылок с одним элементом на чистом CSS

Стили ссылок с одним элементом на чистом CSS

На основе вещей, которые видели в ручках Medium и других людей, но с добавленной попыткой добавить некоторую анимацию.В настоящее время ограничено ссылкой общей шириной 10000 пикселей по всем строкам.
Сделано Мэтью Шилдсом
24 июня 2017 г.

Демо-изображение: эффект зачеркивания при наведении

Эффект зачеркивания при наведении

Эффект наведения для ссылок. Используйте только один псевдоэлемент в ссылке.
Сделал Артём
23 июня 2017 г.

Демо GIF: Jumping Link Hovers

Jumping Link Hovers

Переход по ссылке при наведении курсора на HTML и CSS.
Сделано Bennett Feely
19 июня 2017 г.

Демо GIF: ссылка со стрелкой

ссылка со стрелкой

Ссылка со стрелкой - кружок при наведении (см. Домашний сайт Google).
Сделано Александром Джолли
21 мая 2017 г.

Автор
  • шнек
О коде

Стиль ссылки анимации ключевых кадров CSS3

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Соня Штридер
О коде

Анимация ссылки

Анимация ссылки при наведении.

Автор
  • Амелия Беллами-Ройдс
О коде

Ссылки с примечаниями на полях

Вторая попытка создать доступную и более гибкую версию стиля ссылки, используемого в https://thecorrespondent.com

Демонстрационный GIF: Эффекты при наведении на якорь

Эффекты при наведении на привязку

Тестирование некоторых эффектов наведения для тегов привязки в основной типографии с использованием псевдоэлементов CSS.
Сделано Саймоном Гудером
29 мая 2016 г.

Автор
  • Эмили Хейман
О коде

Эффект при наведении / щелчке подсветки ссылки

CSS фоновый переход для добавления эффекта выделения при наведении / щелчке ссылки.

Автор
  • Миша Хисаккерс
О коде

Эффекты при наведении курсора на подчеркивание текста

Быстрые эксперименты с : до и : после hover-эффекты на однострочных элементах.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

Автор
  • Николас Уди
О коде

Ссылка со стрелкой

Ссылка-стрелка : эффект наведения .

Автор
  • Йенс Летткеманн
О коде

Анимация наведения ссылки SCSS

Гиперссылка : наведение CSS-анимаций.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Демонстрация GIF: Анимация на холсте при привязке клика

Анимация на холсте при нажатии на якорь

Холсты позиционируются абсолютно и используют свойство svg css pointer-events, чтобы холст не блокировал ваши щелчки.
Сделано Ником Шеффилдом
3 мая 2016 г.

Автор
  • Бренден Палмер
О коде

Ссылка на идеи (подтверждение концепции)

Классные идеи ссылок на CSS3.

Демонстрация GIF: Тонкие анимации ссылок

Тонкие анимации ссылок

Ничего особенного, ничего особенного. Всего несколько тонких, но очевидных CSS-анимаций с текстовыми ссылками. Скорее ссылка, чем что-либо новаторское.
Сделано Иосипом Психисталом
21 октября 2014 г.

Демонстрационный GIF: эффекты наведения ссылки

Эффекты наведения ссылки

8 эффектов наведения ссылки CSS.
Сделано Peiwen Lu
4 апреля 2014 г.

ссылок на стили CSS | Как стилизовать ссылки в CSS

Ссылка представляет собой соединение с одной веб-страницы на другую веб-страницу.Это свойство CSS можно использовать для связывания стилей по-разному. В этой статье вы узнаете, как установить различные свойства гиперссылки с помощью свойства CSS. Итак, давайте посмотрим, как лучше всего стилизовать ссылки.

Первое, что нужно понять, - это концепция состояний ссылок, различных состояний, в которых могут быть ссылки, которые могут быть созданы с использованием различных псевдоклассов:

  • unvisited link : это состояние по умолчанию, в котором находится ссылка, точнее, когда она не находится ни в каком другом состоянии.Его можно спроектировать определенным образом с помощью псевдокласса ссылки.
  • посещено : представляет ссылку, к которой уже осуществили доступ, посещение, оформленную с использованием псевдокласса: visit.
  • active : представляет собой ссылку, которая активируется при нажатии на ссылку, оформленную с использованием псевдокласса: active.
  • hover : представляет ссылку, которая при наведении курсора на ссылку активирует свойство, оформленное с использованием псевдокласса: hover.
  • focus : представляет ссылку, которая была сфокусирована (пример: пользователь перемещает действие к элементу страницы с помощью клавиши Tab или программно с помощью HTMLElement.focus ()), стилизованный с использованием псевдокласса: focus

Вот пример простой ссылки:

 


 Ссылки CSS 
<стиль>
п {
   размер шрифта: 30 пикселей;
   выравнивание текста: центр;
   }




  Пример простой ссылки

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

Стили по умолчанию можно изменить или деактивировать, используя следующие свойства CSS: стиль указателя мыши, цвет текста и контур текста.

Вот пример использования свойства text-decoration:

 


<стиль>
п {
   размер шрифта: 30 пикселей;
   выравнивание текста: центр;
   }

ссылка {
  текстовое оформление: нет;
}
а: посетил {
  текстовое оформление: нет;
}
a: hover {
  текст-оформление: подчеркивание;
}
a: active {
  текст-оформление: подчеркивание;
}




   Вот ссылка

Вот еще один пример, на этот раз с использованием свойства background-color:

 


<стиль>
п {
   размер шрифта: 30 пикселей;
   выравнивание текста: центр;
   }
ссылка {
  цвет фона: коралловый;
}
а: посетил {
  цвет фона: голубой;
}
a: hover {
  цвет фона: DarkMagenta;
}
a: active {
  цвет фона: DarkSalmon;
}




   Это ссылка

Расширенные кнопки ссылок CSS: чтобы создать кнопку ссылки, используйте некоторые свойства стиля CSS, чтобы вы могли создать поле и сделать его интерактивным. Вам понадобится свойство color, чтобы установить цвет текста, представляющего ссылку, цвет фона, чтобы добавить цвет к самой кнопке, text-decoration, чтобы удалить подчеркивание из ссылки, свойство text-align, чтобы установить выравнивание ваша ссылка, свойство display описывает, как должна отображаться ваша ссылка и свойство padding, и определяет, насколько большой будет ваша кнопка.

Вот пример:

 


<стиль>
a: link, a: посещено {
    цвет фона: DarkSalmon;
    граница: нет;
    цвет: #FFFFFF;
    отступ: 25px 52px;
    выравнивание текста: центр;
    -webkit-transition-duration: 0.4 с;
    продолжительность перехода: 0,4 с;
    текстовое оформление: нет;
    размер шрифта: 20 пикселей;
    выравнивание текста: центр;
    курсор: указатель;
    дисплей: встроенный блок;
}
a: hover, a: active {
    цвет фона: Темно-красный;
}




 КНОПКА

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

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

 


<стиль>
body, html {
  маржа: 0;
  семейство шрифтов: sans-serif, arial, helvetica;
}
ul {
  отступ: 0;
  ширина: 100%;
}
li {
  дисплей: встроенный;
}
a {
  наброски: нет;
  текстовое оформление: нет;
  дисплей: встроенный блок;
  ширина: 19,5%;
  маржа-право: 0,625%;
  выравнивание текста: центр;
  высота строки: 3;
  цвет белый;
}
li: last-child a {
  маржа справа: 0;
}
a: link, a: посещено, a: focus {
  фон: DarkSalmon;
}
a: hover {
  фон: темно-красный;
}
a: active {
  фон: красный;
  цвет белый;
}

Давайте посмотрим, что происходит в приведенном ниже примере, сосредоточив внимание на наиболее интересных частях.Следовательно, второе правило удаляет отступы из элемента