Ссылки CSS/HTML

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

Как изменить цвет ссылки при наведении CSS

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

Пример

HTML


<a href="#" class="change-color-link" title="">Lorem Ipsum</a>
      

CSS


.change-color-link{
  color: #f66d52; /* Цвет ссылки */
  font-size: 2em;
  font-weight: bold;
  padding: 20px 0px;
  line-height: 1;
  text-decoration: none;
  -webkit-transition: all 1s ease;
          transition: all 1s ease; /* Время изменения цвета */
}
.change-color-link:hover{
  color: #ffa000; /* Меняем цвет ссылки */
}
     

Как сделать заголовок в виде ссылки

В некоторых случаях может потребоваться сделать заголовок в виде ссылки, что бы это сделать сам текст заголовка следует поместить внутрь элемента <a>, который в свою очередь будет располагаться внутри <h1>. В HTML5 допустимо менять элементы местами и разместить <h1> внутри <a>.

Пример

Lorem Ipsum

[ HTML5 ↓ ]

Lorem Ipsum

HTML


<h1><a href="link-page.html" class="link-page">Lorem Ipsum</a></h1>
<!-- HTML5 -->
<a href="link-page.html" class="link-page"><h1>Lorem Ipsum</h1></a>
      

CSS


a.link-page {
    color: #f66d52; /* Цвет ссылки */
}
     

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

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

Пример

HTML


<a href="#" class="external-link-start">Lorem Ipsum</a>
<a href="#" class="external-link-end">Lorem Ipsum</a>
      

CSS


/* Картинка в начале ссылки */
a.external-link-start {
    background: url(image.png) no-repeat 0 50%; /* Параметры картинки */
    padding-left: 25px; /* Расстояние слева */
}
/* Картинка в конце ссылки */
a.external-link-end {
    background: url(image.png) no-repeat 100% 50%; /* Параметры картинки */
    padding-right: 25px; /* Расстояние справа */
}
     

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

Чтобы добавить пунктирное подчёркивание к ссылке, следует добавить нижнюю границу к ней с помощью свойства border-bottom. Так как пунктирное подчёркивание часто используется для оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе, то следует задать таким ссылкам определенный класс.

Пример

HTML


<a href="#" class="dotted-link">Lorem Ipsum</a>
      

CSS


.dotted-link {
    color: #f66d52; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчёркивание */
    border-bottom: 1px dashed #f66d52; /* Добавляем свою линию */ 
}
     

Подчеркивание у ссылки при наведении CSS

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

Пример

HTML


<a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
      

CSS


a {
    color: #00bfff; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчеркивание */
}
a:visited {
    color: #8a2be2; /* Цвет посещённой ссылки */
} 
a:hover {
    color: #f66d52; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
}
     

Изменение фона и цвета ссылки CSS

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

Пример

Lorem Ipsum

HTML


<p>Lorem Ipsum</p>
      

CSS


p {
    color: #5a5a5a; /* Цвет текста */
    background: #ffc; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    transition: 1s linear; /* Время изменения */
}
p:hover {
    color: #fff; /* Цвет текста */
    background: #f66d52; /* Цвет фона */
}
     

Картинка ссылка CSS/HTML

Как сделать картинку ссылкой? На самом деле все очень просто. В тег <a> вставляем саму картинку <img>, атрибут src у картинки — это путь к картинке, атрибут href у ссылки — адрес сайта или веб-страницы, куда будет вести ссылка. Посмотреть наглядно можно на примере:


<a href="https://stylecss.ru/"><img src="img/cat.png" alt=""></a>
Картинка ссылка CSS/HTML

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