Как создать ссылку с изображением hover в простом CSS

Статья написана:
  • Дизайн веб-сайта
  • Обновлено: февраль 27, 2020

* Обновление заметок: эта публикация была впервые опубликована в октябре 2009 года. Некоторые из упомянутых мной методов, возможно, устарели. Пожалуйста, обратитесь к это руководство по новейшей технике создания сайтов.

Что за парение? Определение, приведенное в UWStout.edu:

«Наведение» - это эффект, возникающий при наведении курсора на ссылку любого вида. Ссылка может быть закодирована для ответа при наведении курсора путем изменения цвета, отображения новой графики или даже воспроизведения звукового файла.

Эффект парения повышает удобство использования веб-сайтов и помогает владельцам веб-сайтов направлять свои веб-потоки. Если вы хотите, чтобы ваши пользователи обращали особое внимание на специальную ссылку, хорошим способом для этого является создание ссылки с привлекательным эффектом наведения. Подобный простой эффект наведения (простое подчеркивание и изменение цвета текста) указывает на то, что этот текст «кликабелен» и улучшает взаимодействие в Интернете. Тем не менее, изменение цвета и стиля текста (подчеркивание / обводка / полужирный) очень основа, и с помощью наведения мыши можно сделать гораздо больше.

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

Пример 1: ссылка с кнопкой наведения

Во-первых, посмотрите на рабочий пример (наведите указатель мыши на ссылку, чтобы увидеть, как это работает - смена значка сбоку).

Пример 1 - Ссылка с изображением кнопки наведения

Это завершенная версия того, что будет построено в этом примере.

Как мы создаем его в виде простого CSS?

Изображение кнопки

Шаг 1, как вы можете видеть, нам нужны значки стрелок в двух разных версиях. В нашем примере я использовал красный (#CC3300) в качестве кнопки ссылки по умолчанию; и серый (#333333) для эффекта наведения. Такая кнопка может быть легко сделана с использованием любого программного обеспечения для редактирования изображений.

Теперь у нас есть кнопка красного цвета (скажем, b1.png) и цвет rey (например, b2.png). Слейте эти два в один файл изображения с помощью b1.png поверх b2.png. Это будет наш окончательный образ для ссылки. Назовите его (скажем, x.png) и загрузите нужное место (для моего случая я поместил его в мою папку шаблонов WP).

Для справки:

b1.png , b2.png , и x.png

Код CSS

Далее, в коде CSS. В основном то, что мы хотим достичь, - это отступы от текста ссылки немного вправо, чтобы освободить место для кнопки; и в то же время отображать другое изображение, когда ссылка находится в состоянии зависания. Это довольно фундаментальные вещи, за исключением того, что нам нужно немного закрутить фоновую позицию. Хитрость заключается в том, чтобы показать верхнюю часть изображения (красную кнопку) для исходной ссылки; и при наведении на место, замените фоновое изображение краем -11px (он может отличаться на вашем веб-сайте), чтобы отобразить кнопку серого цвета.

.xa {color: #cc3300; отступ слева: 14px; вес шрифта: полужирный; background-image: url (images / x.png); background-position: 0 2px; повторение фона: без повтора; }
.xa: hover {color: #333333; отступ слева: 14px; вес шрифта: полужирный; background-image: url (images / x.png); background-position: 0 -11px; повторение фона: без повтора; }

Реализация

Чтобы показать этот эффект при наведении, просто вставьте класс x в обозначенную область. Вот пример того, как вы можете это сделать.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Домашняя страница </a> </ p>

Пример 2: ссылка в фоновом режиме

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

Пример 2 - ссылка в фоновом режиме

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

Как мы создаем его в виде простого CSS?

Фоновые изображения

Сначала создайте два изображения скругленного прямоугольника. Для демонстрации мы не будем объединять эти два изображения в этом примере. Мы назовем красный (#CC3300) прямоугольник как b1.png; и бордовый (#9F2800) прямоугольник как b2.png.

Код CSS

Далее приведены коды для вашей таблицы стилей (во втором примере мы называем класс y).

ay {width: 280px; высота: 42px; цвет: #000000; отступы: 10px; текст-отделка: нет; дисплей: блок; вес шрифта: полужирный; background-image: url (images / b1.png); повторение фона: без повтора; }
ay: hover {width: 280px; высота: 42px; цвет: #FFFFFF; отступы: 10px; вес шрифта: полужирный; текст-отделка: нет; дисплей: блок; background-image: url (images / b2.png); повторение фона: без повтора; }

Реализация

Чтобы отобразить ссылку, просто вставьте класс (y) в тег <a href> в исходном коде. Пример:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Домашняя страница </a>

Подведение итогов

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

О Джерри Лоу

Основатель WebHostingSecretRevealed.net (WHSR) - обзора хостинга, которому доверяют и используют пользователи 100,000. Более чем 15-летний опыт в веб-хостинге, партнерском маркетинге и SEO. Вкладчик в ProBlogger.net, Business.com, SocialMediaToday.com и многое другое.

Подключение: