Время для прочтения: 0 мин. 42 сек.

4 идеи оформления ссылок при наведении через CSS

Ссылки являются основной частью Интернета, связывая всё в единую сеть. Обычно при наведении ссылка подчеркиваестя, либо наоборот, подчеркивание убирается, либо меняется цвет. Я покажу вам ещё четыре идеи оформления ссылок при наведении, используя только CSS.

1. Плавный переход цвета

В CSS3 появилось новое свойство, названное «transition». Можно попробовать использовать его для плавного изменения цвета ссылки (в браузера-дегенератах, например IE, это, конечно, не работает).

Пример: Наведи на меня


a:hover {
   color:#f00;
   -webkit-transition:color 500ms ease-in;
   -moz-transition:color 500ms ease-in;
   -o-transition:color 500ms ease-in;
   transition:color 500ms ease-in;
}

2. Тень

Другой CSS3 трюк — использование тени.


a:hover {
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

Пример: Наведи на меня

3. Смещение

Простой и действенный способ — добавить смещение ссылки в любую из сторон, или сразу в несколько.


a:hover {
    position: relative; 
    top: 2px;
}

Пример: Наведи на меня

4. Прозрачность

Изначально ссылки на 50% прозрачные, при наведении прозрачность пропадает. Возможно сделать и наоборот.


a {
    opacity: .5;
}
a:hover {
    opacity: 1;
}

Пример: Наведи на меня

Какие методы используете вы? Жду ваших предложений в комментариях ☺.

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Irina Afanasenko

    Спасибо за готовые решения! Использовала прозрачность, так как в виде ссылки у меня и текст, и превью картинки — получилось отлично.

  • Интересные плашки но Будущие за CSS 4

  • Писал подобную статью — Простое плавное изменение цвета ссылок при наведении курсора (у нас сайты схожей тематики), но даже не пришло в голову, что можно ссылки выделять при помощи тени, как это сделали выше вы! Спасибо за очень интересную идею, попробую использовать, как раз сейчас переделываю шаблон сайта.

  • Прикольная темка. Будем ждать когда же все браузеры будут поддерживать css3

    • Все современные браузеры уже поддерживают CSS3 должным образом. Под старые версии есть много заплаток: CSS3PIE, HTML5.js, ie-css3.js