Exore LTD » CSS3 » Эффекты кнопок социальных сетей для сайта
Лого SiteHere.ru

Октябрь 29, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Эффекты кнопок социальных сетей для сайта

Эффекты для кнопок социальных сетей для сайта

Как Вы думаете, можно ли совместить кнопки социальных сетей и изображения? Чтобы и то и другое смотрелось очень красиво и креативно. Да, можно это сделать очень интересным способом. И даже не одним, а несколькими. А если быть точнее, то в статье Вы найдете 12 способов сделать классные эффекты для кнопок социальных сетей при наведении на изображение. В некоторых случаях необходимо не просто наведение, а еще и клик мыши, что также добавляет интерактива. Необычный способ выделить свой сайт, используя именно такие эффекты при наведении на изображение.

Все 12 примеров смотрите и скачивайте по ссылке ниже:

Смотреть примерыСкачать

Кстати, по поводу эффектов при наведении, на сайте по этой теме есть еще парочка статей:

Понравился эффект — используйте!

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

California surf

(наведите на изображение)

Довольно привлекательный способ выделить самые важные изображения как на сайте так на одностраничном продающем сайте. Но, как я уже писал, эффектов значительно больше (12!).

Шаг 1 — HTML

Для иконок, которые Вы видите на кнопках социальных сетей, используется FA (Font Awesome). Подключаются эти иконки одной строкой между блоками <head></head>:

HTML КОД
1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

После того, как Вы скачали все исходники, необходимо выбрать понравившийся эффект. Мой эффект находится в файле index.html. В этом же файле находятся и все необходимые стили для того, чтобы создать эффект при наведении.

Копируем оттуда блок со всеми кнопками социальных сетей и изображениями. Этот блок <div> находится под список меню со всеми эффектами. В моём случае этот блок имеет такой вид:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="image-effect-fall-back">
    <div class="share-layer">
        <a href="#" class="share-button share-via-vk">
            <i class="fa fa-vk"></i>
            Вконтакте
        </a>
        <a href="#" class="share-button share-via-facebook">
            <i class="fa fa-facebook"></i>
            Facebook
        </a>
        <a href="#" class="share-button share-via-twitter">
            <i class="fa fa-twitter"></i>
            Twitter
        </a>
    </div>
 
    <div class="image-layer">
        <img src="images/tree.jpg" width="500" alt="California surf">
    </div>
</div>

Вся необходимая структура есть. Осталось задать только стили в CSS. Поэтому переходим ко 2-му и, одновременно, последнему шагу.

Шаг 2 — CSS

Стили находятся в каждом HTML файле между блоками <head></head>. То есть в каждом файле с разными эффектами, в этом блоке вверху документа находятся соответствующие стили.

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.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 код в свой файл стилей, кнопки могут отображаться не совсем так, как на примере. Это может быть связано с тем, что в Вашем файле стилей заданы другие стили для элементов и классов, которые используются в демо.

Вывод

Как правило, креатив всегда приветствовался. Я думаю здесь каждый для себя сможет выбрать один эффект из 12 и использовать в дальнейшем в собственных проектах.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • orenkomp.ru

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

     
    Ответить
  • Олег

    Скажи, а как мне на мои изображения кнопок, которые я отрисовал в фотошопе поставить ссылки на социальные сети? Чтобы при нажатии на мою красивую кнопку ВК открывалось окно и человек мог сделать репост на свою стену? Ну и т.д. со всеми соц сетями. Это вообще как то возможно делать без генерации кода в разделах разработчика ВК, G+ и т.д. Есть у тебя информация на эту тему? Мне более 12 кнопок оформить надо в одном стиле, и я вот не знаю как(((

     
    Ответить
    • Юрий

      Привет.

      1) Берешь готовый работающий плагин с кнопками социальных сетей.

      2) Меняешь стили CSS под свои и ставишь свои изображения.

       
      Ответить

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

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