HTML Ссылки — Цвет

Ссылки в HTML отображаются разными цветами в зависимости от их состояния: посещенные, непосещенные или активные.

Цвета ссылок по умолчанию

По умолчанию, ссылка будет отображаться следующим образом во всех браузерах:

Непосещенная ссылка: подчеркнута и синего цвета.
Посещенная ссылка: подчеркнута и фиолетового цвета.
Активная ссылка: подчеркнута и красного цвета.

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

Пример изменения цветов ссылок с помощью CSS

В этом примере непосещенная ссылка будет зеленого цвета без подчеркивания, посещенная ссылка будет розового цвета без подчеркивания, активная ссылка будет желтого цвета с подчеркиванием. Кроме того, при наведении курсора на ссылку (состояние a:hover) она станет красной и подчеркнутой:

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

Кнопки-ссылки

Ссылку также можно стилизовать как кнопку с помощью CSS:

Это ссылка

Пример:

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

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