Как создать соц кнопки кнопки html для сайта самому? Узнай и создай анимированные соц кнопки для сайта сам!

Здравствуйте, уважаемые друзья и гости блога! Сегодня я Вам расскажу и покажу, как создать красивые анимированные соц кнопки html для сайта, всего за пару минут, буквально! Если Вам это интересно и нужно? Тогда, поехали …

Сейчас Вы можете видеть пример – это анимированные соц кнопки html для сайта, которые размещены у меня в сайдбаре справа. Но не факт, что они там будут вечно и я их не изменю или не заменю вообще чем-то другим. А вот для этого, я их размещаю прямо в данном материале:

Код кнопки html для сайта – Копируй и вставляй!

• Действие первое – скачиваем необходимые изображения для установки соц кнопок, которые я Вам приготовил – вот ссылка. После скачивания картинок соц кнопок, которые будут в архиве, разархивируйте и выберите для себя приемлемые. Затем поместите выбранные картинки на свой хостинг в папку, адрес которой Вам потом пригодится!
• Действие второе – устанавливаем специальные стили CSS для того, чтобы наши кнопки на сайте ожили и стали анимированными. Вот код css:

/*-------------------Анимированные соц кнопки для сайта--------------*/
#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Этот код со стилями css, нужно разместить на Вашем сайте в шаблоне активной темы сайта в файл style.css, который у каждой темы обязательно присутствует. Вставьте его в самом низу через FTP редактор или просто через хостинг.

• Действие третье – самое интересное! Создаем специальный HTML код, который будет выводить наши соц кнопки на сайте и превращать их в анимированные. Вот примерно такой код HTML:

<div id="social">
<a href="ВАША ССЫЛКА_1" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_1" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_1" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_2" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_2" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_2" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_3" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_3" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_3" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_4" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_4" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_4" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_5" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_5" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_5" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_6" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_6" alt="Кнопки HTML для сайта - Создай соц кнопки для сайта сам!" src="ССЫЛКА НА КАРТИНКУ_6" width="48" height="48" /></a>
</div>

В данном html коде Вам нужно заменить символы, которые приведу ниже, на свои:

• ВАША ССЫЛКА_№ – заменяем на вашу ссылку, при нажатии на которую посетитель будет попадать в необходимое место, например на Вашу страницу Вконтакте и т.д.
• ОПИСАНИЕ_№ – здесь Вам нужно вписать описание, которое будет высвечиваться при наведении мышки на картинку. Например, если у Вас картинка Twitter, то соответственно напишите в описании аналогично.
• ССЫЛКА НА КАРТИНКУ_№ – тут Вам необходимо вставить ту ссылку, которая будет вести к картинке закаченной ранее на хостинг. Помните я Вам говорил выше, чтобы Вы сохранили адрес к папке с картинками хранящимися на хостинге? Вот он как раз и пригодится здесь!

Вот собственно говоря и все, что требовалось от Вас, чтобы создать анимированные соц кнопки html для сайта!

Всем удачи и благополучия! До новых встреч!