Домой | Сайтостроение | Кнопки HTML для сайта — Создай соц кнопки для сайта сам!
кнопки html для сайта
кнопки html для сайта

Кнопки HTML для сайта — Создай соц кнопки для сайта сам!

кнопки html для сайта
кнопки html для сайта

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

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

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

Но возникает вопрос ... Как создать их? Ничего в данном вопросе нет сложного!
Чтобы каждый из Вас смог осуществить это самостоятельно и при этом не зная языка HTML и CSS, для этого я Вам дам в этой статье специальные, готовые коды и изображения для соц кнопок.
Картинки Вы сможете заменить на свои, если они Вам будут не по-душе или просто не подойдут к Вашему сайту по дизайну!
Ну, что? Переходим к практическим действиям ...

Код кнопки 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="" src="ССЫЛКА НА КАРТИНКУ_1" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_2" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_2" alt="" src="ССЫЛКА НА КАРТИНКУ_2" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_3" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_3" alt="" src="ССЫЛКА НА КАРТИНКУ_3" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_4" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_4" alt="" src="ССЫЛКА НА КАРТИНКУ_4" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_5" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_5" alt="" src="ССЫЛКА НА КАРТИНКУ_5" width="48" height="48" /></a>
<a href="ВАША ССЫЛКА_6" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_6" alt="" src="ССЫЛКА НА КАРТИНКУ_6" width="48" height="48" /></a>
</div>

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

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

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

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

Про Валерий Бородин

Проверьте также

счетчик яндекс метрика на сайт

Счетчик Яндекс Метрика на сайт — Это нужно знать каждому блоггеру!

Как и для чего нужно устанавливать счетчик Яндекс Метрика на сайт? Узнай здесь! Здравствуйте, уважаемые …

Один комментарий

  1. Нужные кнопки, с их появлениями, стало легче продвигать свой сайт.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Политика конфиденциальности