Красивое оформление ссылок css

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* 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;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

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;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

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;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Красивые ссылки на вашем сайте

Эта статья для всех, кто хочет делать красивые сайты. Одна из главных вещей на сайте — это ссылки, и они должны выглядеть роскошно. В этой статье покажем, как настроить красивые ссылки, на примере страницы «О себе».

Сведения из этой статьи будут полезны всем, у кого есть и будет сайт на чистом HTML или на движке, где вы контролируете стили. Если у вас условная «Тильда» или «Редимаг», это не подойдёт — там управление стилями ограничено.

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

• ссылки не подчёркнуты, непонятно, что это ссылки;
• когда наводишь мышку, ссылка подчёркивается, но очень толсто;
• ссылки, по которым мы уже щёлкали, не выделяются другим цветом — так не ясно, что мы уже читали, а что нет.

Как будет

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

Всё дело в CSS

Чтобы сделать красиво, нам понадобится CSS — специальная разметка, которая отвечает за внешний вид и поведение элементов на странице.

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

Между фигурными скобками мы напишем код, который превратит наши ссылки в ссылки со стильным тонким подчёркиванием. Для этого нам понадобится:

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

Убираем стандартное подчёркивание

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

Задаём цвет ссылки

Это стандартный цвет ссылок в браузере Chrome, возьмём его за основу.

Делаем тонкую линию внизу

Первая строчка говорит браузеру, чтобы он нарисовал под ссылкой (border-bottom) сплошную линию (solid) толщиной в один пиксель (1px).

А вторая — чтобы эта линия была определённого цвета. RGBA означает, что нам нужно смешать красный, зелёный и синий цвета (RGB) и задать им какую-то прозрачность (A). Сделаем всё тем же цветом, что и ссылки, а прозрачность поставим 0.2 — так линия будет выглядеть тоньше, чем один пиксель.

Собираем всё вместе

Меняем цвет ссылки при наведении

За реакцию на наведение мышки отвечает hover, поэтому нам в CSS-раздел нужно добавить такое:

Это значит, что когда мы подведём курсор к ссылке, то сработает тот набор инструкций, который будет прописан в этом разделе.

Нам нужно, чтобы ссылка поменяла цвет на оранжевый и при этом осталась тонкая линия подчёркивания. Для этого повторим все шаги из предыдущего раздела, кроме border-bottom: 1px solid; — это свойство достанется в наследство сразу всем ссылкам, а вот всё остальное нужно прописать заново.

Убираем стандартное подчёркивание:

Чтобы текст ссылки стал оранжевого цвета, используем команду:

Делаем у линии тот же цвет, что и у активной ссылки:

border-bottom-color: rgba(208, 64, 0, 0.2);

Помечаем использованные ссылки

Здесь всё то же самое, что и в предыдущем разделе, только вместо hover будем использовать visited — именно оно отвечает за поведение ссылки, по которой мы уже переходили. Цвет возьмём стандартный фиолетовый: #800080, и этот же цвет переведём в RGBA для подчёркивания ссылок.

Если вам кажется, что статья закончилась слишком быстро и что можно было сделать ещё красивее, приходите учиться веб-разработке в «Практикум». Будет много HTML, CSS и остальной красоты.

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

Источник

Основы CSS: стилизация ссылок

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

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

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Уже намного лучше! Но зачем останавливаться? Давайте рассмотрим пару других способов стилизации ссылок для завершения UX.

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

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

Hover (:hover): когда курсор расположен над ссылкой без клика

Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор

Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

Ниже представлена ссылка из предыдущего демо. Сперва попробуйте навести курсор на нее без клика. Обратите внимание, под ссылкой появляется подчеркивание. Кликните на нее и зажмите – так вы увидите активное состояние ссылки, когда ее цвет становится черным. Отпустите кнопку мыши, и ссылка станет фиолетовой еще до ее посещения.

Концепция ссылки кажется простой, но там много чего происходит – и CSS дает нам невероятную мощь по настройке UX!

Ссылки как кнопки

На эту тему ведутся споры, но мы можем с помощью CSS превратить текстовую ссылку в кнопку.

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

Источник

Как красиво оформить ссылки

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

21 способ красиво оформить ссылки:

Посмотреть примерСкачать

Как и в предыдущем уроке мы рассмотрим на примере одного вида эффекта. В структуре ссылок ничего нового:

Он используется для дублирования текста самой ссылки. А для создания эффекта перспективы используется дополнительный элемент :

Вот так выглядит CSS стиль для ссылок, которые используют 15-й эффект (при котором ссылка немного уменьшается в размере и изменяет свой цвет):

/* Эффект 15: уменьшение и изменение цвета */ .cl-effect-15 a < color: rgba(0,0,0,0.2); font-weight: 700; text-shadow: none; >.cl-effect-15 a::before < color: #fff; content: attr(data-hover); position: absolute; transition: transform 0.3s, opacity 0.3s; >.cl-effect-15 a:hover::before, .cl-effect-15 a:focus::before

Вывод

К сожалению IE10 не поддерживают CSS свойство transform-style: preserve-3d . Надеюсь эта коллекция ссылок поможет в создании необычных эффектов на своём сайте! Забирайте их себе и смело применяйте 🙂 .

Успехов!

Создатель проекта «sitehere.ru». Сооснователь компании «Exore». В интернет-маркетинге с 2013 года. Специализируется на контент-маркетинге и SEO. Автор мини-книги «Как раскрутить сайт с нуля до 32 000 посетителей в месяц».

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

11 комментариев к записи

Здравствуй, Юрий. У тебя много полезных сниппетов на сайте. Вот добавил себе в меню 1-вый эффект. Тем более, что подключать скрипт даже не пришлось. Наверное у меня взаимодействует с библиотекой jQuery. Спасибо большое!

Добрый день, Юрий! Хочу модернизировать свой сайт. Попытался применить одну из твоих ссылок (вариант 20), но так, чтобы при наведении курсора на неё после перекидывания всплывала нужная мне картинка под этой ссылкой. Оформить появление картинки смог, а вот внедрить туда механизм твоей ссылки пока не получается. Сразу отмечу, что опыта маловато, поэтому учусь по ходу работы.

Здравствуйте, Олег! У вас это не получается, потому что с помощью CSS нельзя вывести тег изображения из атрибута data-hover. Чтобы это сделать, необходимо изменить структуру: 1. Расположить изображение внутри тега 2. Затем скрыть этот и показывать его только при наведении. То есть сделать по аналогии с псевдоклассом :before. Результат можно посмотреть здесь: ПРИМЕР ДЛЯ ОЛЕГА. Скачать архив с примером можно здесь: СКАЧАТЬ АРХИВ. Если не хотите скачивать, то вот HTML структура, которую необходимо вставить на ваш сайт:

.cl-effect-20 a < line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; font-weight: 600; >.cl-effect-20 a < position: relative; display: inline-block; width: 110px; padding: 3px 15px 0; background: #587285; box-shadow: inset 0 3px #2f4351; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; transition: background 0.6s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; text-align: center; >.cl-effect-20 a span < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #2f4351; -webkit-transform: rotateX(270deg); -moz-transform: rotateX(270deg); transform: rotateX(270deg); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; >.cl-effect-20 a:hover span, .cl-effect-20 a:focus span < background: transparent; >.cl-effect-20 a:hover span, .cl-effect-20 a:focus span