Стили ссылок

При помощи CSS мы можем определять самые разнообразные стили для ссылок.

Текстовая ссылка Текстовая ссылка Ссылочная кнопка Ссылочная кнопка

Определять стили ссылок можно при помощи любых CSS свойств (например, color, font-family, background и т.д.).


a {
  color: hotpink;
}

Кроме этого можно определять различные стили ссылок в зависимости от их состояния.

Есть четыре состояния ссылки:

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


/* обычная ссылка */
a:link {
  color: red;
}

/* посещенная ссылка */
a:visited {
  color: green;
}

/* курсор на ссылке */
a:hover {
  color: hotpink;
}

/* ссылка выбрана */
a:active {
  color: blue;
}

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

a:hover должна стоять ПОСЛЕ a:link и a:visited
a:active должна стоять ПОСЛЕ 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;
}

Результат:

Ссылочная кнопка

Еще один пример, как сделать ссылку в виде кнопки:


a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

Результат:

Ссылочная кнопка