Оформляем кнопку Мне нравится у себя на сайте

Сегодня сделать свой сайт может практически каждый, кто имеет доступ в интернет - нашёл какой-нибудь ресурс типо narod.ru, где предлагается брать за основу СВОЕГО сайта чужие шаблоны. Естественно, эти шаблоны будут предложены самим сервисом и пользоваться ими можно будет, не опасаясь того, что вас кто-то будет обвинять в плагиате.
Параллельно развиваются социальные сети, в которых по разным данным уже находится несколько сотен миллионов человек по всему миру. И разумеется, каждому, кто владеет своим сайтом и страничками в соц сети хочется делиться успехами своего сайта с друзьями.

Сервисы социальных сетей "поймали" эту тенденцию, и развивают этот вид услуг - распространение ссылок по сети. На самом деле, с точки зрения раскрутки своего сайта - это не совсем разумный ход. Но счётчик посетителей накрутить можно.
Я не буду говорить о том, какой код следует использовать, чтобы добавлять кнопку нужной соц сети на ваш сайт. Просто приведу список страниц, где это можно сделать:

• для сервисов Одноклассники и Mail.ru (Мой мир) знакомимся здесь
• для сервиса ВКонтакте здесь
• для сервиса Facebook здесь
• для сервиса twitter здесь

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

<a href="ссылка-кнопки-рекомендации-взятой-со-страницы-социальной-сети"><img src="путь-к-изображению-вашей-кнопки" /><a>

Затем создаём стиль, по средствам которого наше изображение будет блекнуть, при наведении на него курсора мыши
элемент.класс_элемента > img:hover
{
filter: alpha(opacity=50); -opacity:0.5; opacity:0.5; -html-opacity:0.5;
}
Если всё выполнено правильно, то при наведении курсора, изображение вашей кнопки на рекомендацию в социальную сеть будет блекнуть.
О том, как внедрять стили CSS в HTML-документы, читаем статью Внедрение CSS в HTML-документ.