Яндекс Метрика
Стили CSS для ссылок в HTML | Пример кода и обзор стилей и тегов

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

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

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

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

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

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

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

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

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

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


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

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


CSS для определения цветов, трансформации цвета и скорости заливки.

А это стили, которые необходимо добавить в файл style.css на вашем сайте и далее вы просто пользуетесь классом в HTML, а стили подтягиваются из указанного файла.

На что обратить внимание:

  • background-color: skyBlue — цвет текста ссылки в начальном варианте;
  • background-image: -webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%) — цвет градиента, которым заливается ссылка;
  • -webkit-transition: .3s .2s — скорость эффекта заливки ссылки.

Follow me: