Оформляємо кнопки соціальних мереж для сайту

Ефекти для кнопок соціальних мереж для сайту

Як Ви думаєте, чи можна поєднати кнопки соціальних мереж і зображення? Щоб і те й інше виглядало дуже красиво і креативно. Так, можна це зробити дуже цікавим способом. І навіть не одним, а кількома. А якщо бути точніше, то в статті Ви знайдете 12 способів зробити класні ефекти для кнопок соціальних мереж при наведенні на зображення. У деяких випадках необхідно не просто наведення, а ще й клік миші, що також додає інтерактиву. Незвичайний спосіб виділити свій сайт, використовуючи саме такі ефекти при наведенні на зображення.

Всі 12 прикладів дивіться і завантажуйте по посиланню нижче:

дивитися прімериСкачать

До речі, з приводу ефектів при наведенні, на сайті по цій темі є ще парочка статей:

Набір ефектів при наведенні CSS - зображення при наведенні CSS
CSS3 бібліотека - 40+ ефектів при наведенні
Приголомшливі ефекти CSS3 при наведенні

Відео: UPTOLIKE КНОПКИ соц.сетях ДЛЯ САЙТУ

Сподобався ефект - використайте!

Наприклад, мені припав до душі перший ефект. Наведіть на зображення нижче, щоб побачити ефект.

(Наведіть на зображення)

Досить привабливий спосіб виділити найважливіші зображення як на сайті так на односторінковому продає сайті. Але, як я вже писав, ефектів значно більша (12!).

Крок 1 - HTML

Для іконок, які Ви бачите на кнопках соціальних мереж, використовується FA (Font Awesome). Підключаються ці іконки одним рядком між блоками :

HTML КОД

1	lt;link rel="Stylesheet" href="Http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"gt;

Після того, як Ви скачали всі вихідні коди, необхідно вибрати потрібний ефект. Мій ефект знаходиться в файлі index.html. У цьому ж файлі знаходяться і всі необхідні стилі для того, щоб створити ефект при наведенні.

Копіюємо звідти блок зі всіма кнопками соціальних мереж і зображеннями. Цей блок знаходиться під список меню з усіма ефектами. У моєму випадку цей блок має такий вигляд:

HTML КОД

1234567891011121314151617181920

lt;div class="Image-effect-fall-back"gt;lt;div class="Share-layer"gt;lt;a href="#" class="Share-button share-via-vk"gt;lt;i class="Fa fa-vk"gt; lt;/igt; Вконтактеlt;/agt;lt;a href="#" class="Share-button share-via-facebook"gt;lt;i class="Fa fa-facebook"gt; lt;/igt; Facebooklt;/agt;lt;a href="#" class="Share-button share-via-twitter"gt;lt;i class="Fa fa-twitter"gt; lt;/igt; Twitterlt;/agt;lt;/divgt;lt;div class="Image-layer"gt;lt;img src="Images / tree.jpg" width="500" alt="California surf"gt;lt;/divgt;lt;/divgt;

Вся необхідна структура є. Залишилося поставити тільки стилі в CSS. Тому переходимо до 2-го і, одночасно, останнього кроку.

Крок 2 - CSS

Стилі знаходяться в кожному HTML файлі між блоками . Тобто в кожному файлі з різними ефектами, в цьому блоці вгорі документа знаходяться відповідні стилі.

Вам необхідно взяти ці стилі і помістити їх в Ваш файл стилів:

CSS КОД

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899

.image-effect-fall-back {width: 500px-height: 300px-position: relative-margin: 0 auto--webkit-perspective: 800px-perspective: 800px-}.image-effect-fall-back .image-layer{position: absolute-top:0-left: 0-height: 300px--webkit-transition: 0.6s-transition: 0.6s-z-index: 1-}.image-effect-fall-back: hover .image-layer{-webkit-transform: rotateX(70deg)-transform: rotateX(70deg)-overflow: visible-}.image-effect-fall-back .image-layer img{height: 100%-}.image-effect-fall-back .image-layer: before{content: ``-position: absolute-top: 0-left: 0-width: 100%-height: 100%-background: rgba(0, 0, 0, 0.5)-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5)-opacity: 0--webkit-transition: all 0.5s-transition: all 0.5s--webkit-transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75)-transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75)--webkit-transform-origin: bottom--ms-transform-origin: bottom-transform-origin: bottom-}.image-effect-fall-back: hover .image-layer: before {opacity: 0.3-}.image-effect-fall-back .share-layer{position: absolute-bottom: 100px-left: 0-width: 100%-height: 100px-opacity: 0-z-index: 10--webkit-transition: 0.6s-transition: 0.6s--webkit-transform: rotateX(70deg)-transform: rotateX(70deg)-}.image-effect-fall-back: hover .share-layer {opacity: 1--webkit-transform: rotateX(0deg) translateY(-70px)-transform: rotateX(0deg) translateY(-70px)-}/ * Стилі для всіх кнопок * /.share-button{display: inline-block-text-decoration: none-color: #ffffff-padding: 12px-width: 90px-border-radius: 2px-margin:	25px 10px-}/ * Колір кнопок соціальних мереж * /.share-via-vk {background-color:# 4C75A3-}.share-via-facebook {background-color:# 3b5998-}.share-via-twitter {background-color:# 00aced-}

Відразу попереджаю: в деяких прикладах використовується jQuery, тому що там, для повного ефекту, необхідно клікнути на зображення. Вам лише потрібно взяти весь JS код, який використовується на сторінці з вподобаним прикладом.

Увага! Після того як Ви вставите CSS код в свій файл стилів, кнопки можуть відображатися не зовсім так, як на прикладі. Це може бути пов`язано з тим, що в Вашому файлі стилів задані інші стилі для елементів і класів, які використовуються в демо.