
Решил вот написать такую заметку для тех кто не профи в HTML и CSS. Я допустим себя тоже к профи не отношу, но могу переделать любой шаблон до неузнаваемости, включая правку стилей и добавление в шаблон разных фишек.
Так вот, часто у меня в начале, когда я еще не плотно работал со стилями и не использовал DIV верстку (предпочитал таблицы) возникало, как бы сказать, не понимание, как ссылки, на какую-то внутреннюю страницу или другой сайт, сделать в виде кнопки.
Я для этого находил какую-то кнопку на CSS через Гугл и добавлял ее к себе на сайт. Сейчас, когда я более подробно начал изучать CSS и верстку DIV-ами, пришло понимание того, что на самом деле все очень просто.
Сейчас я хочу показать несколько способов подсветить картинку или превратить простую ссылку в кнопку.
Допустим вы нашли где-то обычную картинку и хотите ее использовать как кнопку на странице.
Вот допустим такая картинка:
Добавить ее на страницу очень просто. Если закинуть ее в корень сайта, то код такой:
<img src="/knopka_bablo.png" alt="кнопка бабло" title="кнопка бабло" width="100" height="100"/>
Сделать ее ссылкой тоже просто, достаточно обернуть код в тег ссылки
<a href="#ссылка"><img title="кнопка бабло" src="/knopka_bablo.png" alt="кнопка бабло" width="100" height="100" /></a>
Результат простой картинки с ссылкой без подсветки:
Но вам хочется, чтобы при наведении кнопка подсвечивалась. Это можно сделать несколькими способами. Сейчас их рассмотрим.
Способ 1: подсветка за счет подстановки другого изображения
Вариант первый
Первое что вам нужно – это сделать еще одну картинку другого цвета или более светлую (темную) и подставлять ее при наведении курсора.
Для этого открываем картинку любым графическим редактором и делаем ее более светлой или добавляем какой-нибудь оттенок. Сейчас любая программа для работы с изображениями позволяет это делать. Сохраняем ее под другим именем.
Хочешь научиться создавать крутые визуальные эффекты для сайтов? 🤩 Тогда тебе точно нужен курс «Веб-дизайнер: расширенный курс» от Нетологии! 🎨 Ты узнаешь все о подсветке картинок, создании кнопок на CSS, а также освоишь множество других полезных инструментов. 💻 Переходи по ссылке и стань настоящим веб-мастером! 🚀
Например, картинку, которая выше я открыл через Microsoft Office Picture Manager, сделал ее почти черно-белой и сохранил под именем knopka_bablo-2.png. Получилось две картинки (заливаем их на хостинг; в данном случае залито в корень сайта):
Сейчас для того, чтобы при наведении курсора мыши картинка менялась с черно-белой на цветную, используем следующий код в тексте статьи или шаблоне сайта:
<a href="#ссылка"><img title="кнопка бабло" onmouseover="this.src='/knopka_bablo.png';" onmouseout="this.src='/knopka_bablo-2.png';" src="/knopka_bablo-2.png" alt="кнопка бабло" /></a>
А вот результат (наведите курсор):
Вариант второй
Можно сделать и по-другому. В таблицу стилей CSS (обычно файл style.css вашего шаблона) добавить код, при этом имя идентификатора можно придумать любое, в маем случае img-bablo:
#img-bablo a {background-image: url('/knopka_bablo-2.png'); width:100px; height:100px;display: block;} /* картинка сразу */
#img-bablo a:hover {background-image: url('/knopka_bablo.png');} /* картинка при наведении курсора */
А нашу ссылку обернуть в тег div с нужным идентификатором (попросту, код ниже вставить в то место, где нужно показать картинку):
<div id="img-bablo"><a href="https://seodnevnik.ru/zarabatyvayu-zdes"></a></div>
Результат получаем тот же (наведите курсор)
Способ 2: подсветка без использования второй картинки, а просто за счет CSS
Допустим у нас есть такая картинка:
Вот её исходный код:
<img class="img-light" src="https://seodnevnik.ru/wp-content/uploads/2018/09/logo-seo.png">
Как видим, к ней добавлен class=»img-light» (вы можете добавить такой же, или использовать свое название). Для этого класса мы и добавим стиль прозрачности в css-файл:
.img-light:hover {
opacity: .9;
}
Результат (наведите курсор):
Спасибо вам огромное! Способы очень простые, а главное действенные!
Здравствуйте! Спасибо за методу. А можно ли в варианте с CSS как-то убрать надпись и рамку?
Надпись пропадёт если убрать title=»», а рамку вроде не получится. А вообще, я немного в статье не так написал, поэтому и такой косяк, потом подправлю, когда время найдётся.
чтобы убрать рамку пишем border=»0″
Спасибо:)
Нормуль, то что доктор прописал )))
а куда именно вставлять border? у меня что то не получается
Да, вопрос как убрать рамку актуален!!!
В «#img-bablo a img» добавляем «display: block;», из div’а убираем «img», вуаля! без рамки
Спасибо! Подправил статью.
Спасибо Вам огромное. у меня все наконец заработало как я хотела
Здраво! Просто, но работает! Спасибо!
Тот момент, когда у меня этот битый код не работает… ну, Html работает, а CSS битый код.
Привет. А как сделать обтекание текстом такой картинки?