Підсвічування картинки або створення кнопки на css

Вирішив ось написати таку замітку для тих хто не профі в HTML і CSS. Я допустимо себе теж до профі не відношу, але можу переробити будь-який шаблон до невпізнання, включаючи правку стилів і додавання в шаблон різних фішок.

Так ось, часто у мене на початку, коли я ще не щільно працював зі стилями і не використовував DIV верстку (волів таблиці) виникало, як би сказати, не розуміння, як посилання, на якусь внутрішню сторінку або інший сайт, зробити в вигляді кнопки.

Я для цього знаходив якусь кнопку на CSS через Гугл і додавав її до себе на сайт. Зараз, коли я більш детально почав вивчати CSS і верстку DIV-ами, прийшло розуміння того, що насправді все дуже просто.
Зараз я хочу показати кілька способів підсвітити картинку або перетворити просте посилання в кнопку.

Припустимо ви знайшли десь звичайну картинку і хочете її використовувати як кнопку на сторінці.
Ось припустимо така картинка:

Додати її на сторінку дуже просто. Якщо закинути її в корінь сайту, то код такий:

Зробити її посиланням теж просто, достатньо обернути код в тег посилання

Результат простий картинки з посиланням без підсвічування:

Але вам хочеться, щоб при наведенні кнопка підсвічувалася. Це можна зробити декількома способами. Зараз їх розглянемо.

Способи підсвічування за рахунок підстановки іншого зображення

Перше що вам потрібно - це зробити ще одну картинку іншого кольору або світлішу (темну) і підставляти її під час наведення курсору.

Наприклад, картинку, яка вище я відкрив через Microsoft Office Picture Manager, зробив її майже чорно-білої і зберіг під ім'ям knopka_bablo-1.png. Вийшло дві картинки (заливаємо їх на хостинг; в даному випадку залито в корінь сайту):

Зараз для того, щоб при наведенні курсору миші картинка змінювалася з чорно-білої на кольорову, використовуємо наступний код у тексті статті або шаблоні сайту:

А ось результат (наведіть курсор):

Можна зробити і по-іншому. У таблицю стилів CSS (зазвичай файл style.css вашого шаблону) додати код, при цьому ім'я ідентифікатора можна придумати будь-який, в травнем випадку img-bablo:

А наше посилання обернути в тег div з потрібним ідентифікатором (попросту, код нижче вставити в те місце, де потрібно показати картинку):

Результат отримуємо той же (наведіть курсор)