Background Image

Своя стилизация кнопок "Поделиться" uSocial.pro

Script

by — Category Script on

Набор кнопок "Поделиться" для сайта позволяет посетителям Вашего сайта удобно делиться материалами в своих социальных сетях и привлекать вам дополнительный трафик. Некоторые доп. функции по улучшению кнопок на сайте можно получить только при оплате тарифа Light, но команда 'madeas studio' придумала свою стилизацию, которая, думаю, может многим понравиться. Конечно мы рассмотрим не все кнопки, а только наиболее популярные.
 

Посмотреть цветные ховер-кнопки и один из эффектов вы можете на сайте с правой стороны, нажав кнопку демо.

Установка CSS

Начнем с простого - сами кнопки. Пусть мы видим только скрипт, но опытные веб-мастера всегда сами смогут найти нужный CSS код =) Вот так собственно прописываются некоторые стандартные кнопки от сервиса uSocial:

.ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk,
 .ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb,
 .ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi,
 .ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj,
 .ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus,
 .ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok,
 .ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin,
 ico_uscl.ico_uscl-bookmarks.uscl-bookmarks {

здесь прописываем свои размеры, углы(border-radius) и прочее

}

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

 transition: transform 1s; 

Да! Если вы выбрали для своего сайта однотонную форму кнопок, которая при наведении лишь слегка меняет свой цвет, например тускнеет, а вам хочется чтобы Ваши кнопки горели при наведении как обычные цветные, то вот вам код для каждой кнопки:

 .ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk:hover {background-color:#4D75A3!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb:hover {background-color:#3B5998!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi:hover {background-color:#55ACEE!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj:hover {background-color:#09C!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus:hover {background-color:#DC4E41!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok:hover {background-color:#E67E17!important;}
 .ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin:hover {background-color:#0077B5!important;}
 .ico_uscl.ico_uscl-bookmarks.uscl-bookmarks:hover {background-color:#498bfa!important;}

Тут всё, переходим к эффектам.

Первым эффектом будет вращение, но не такое как нам предлагает usocial, нет. Эффект вращения будет заключаться в повороте каждой кнопки на функции трансформации rotate(n* градусов):

  .ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok:hover,
 .ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin:hover {
    transform: rotate(1080deg);
    }

Далее мы будем просто менять transform: rotate(1080deg); на другие эффекты из кода выше:

2. Начнем с простого - с увеличения кнопок при наведении:

transform: scale(2);

3. Создаём сдвиг на 20px в нижний правый угол:

transform: translate(20px, 20px);

4. Эффект растекания или растягивания кнопок в разные стороны:

 

transform: skewX(25deg); transform: skewY(10deg); transform: skew(25deg, 10deg);

5 . Эффект отрывающегося листа. Здесь мы добавим в основные стили кнопок строчку 

transform-origin: left top;

а в ховер эффект вставляем: 

transform: rotate(90deg);

6. А теперь добавим самый интересный эффект - вращение, который не плохо будет смотреться на круглых социальных кнопках. И так, в стили кнопок без наведения добавляем немного анимации:

  -webkit-animation: spin 6s linear 0s infinite normal;
  -moz-animation: spin 6s linear 0s infinite normal;
  -ms-animation: spin 6s linear 0s infinite normal;
  -o-animation: spin 6s linear 0s infinite normal;
  animation: spin 6s linear 0s infinite normal;

Если у вас стоят кнопки квадратные или слегка закругленные, вам не обязательно для использования этого эффекта переходить на uscript и менять весь комплект кнопок. Просто добавьте в css:

border-radius:50%!important;

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

@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

7. Эффект поворота социальных кнопок. Подобный эффект предлагается нам сервисом за денежку, но наш немного упрощён и бесплатен:

transform: scale(-1, 1);

Дальше сложнее, работа с псевдоэлементами и т.д., поэтому мы не будем описывать смену иконки соц сети на лайк или другие иконки на у сервиса, но если вам будет интересно пишите в комментариях, расскажем.

8. Эффект сдвига в левую сторону, чем-то похож на эффект №3:

transform: translate(-10px, 0px);

На этом всё! Один из примеров бесплатной модернизации социальных кнопок вы найдете в демо. Выбирайте эффект который вам нравится и ставьте себе на сайт. Согласитесь, зачем платить если можно сделать свои?! =) by Creative Agency 'Madeas studio'. Всем удачи и больше креативных решений в дизайне и развитии вашего сайта. 


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Мини скрипты для uCoz

    Мини скрипты для uCoz

    Набор всевозможных скриптов

    View More
    1 391 17:22
    Выезжающая панель меню на CSS3

    Выезжающая панель меню на CSS3

    Меню по своему стилю подойдет для сайтов с любым диз...

    View More
    0 736 15:06
    Простой скрипт выделения кода одним кликом

    Простой скрипт выделения кода ...

    Порой в материала...

    View More
    0 525 15:25
    Добавление ссылки на источник при копировании

    Добавление ссылки на источник ...

    Очень простой скрипт, который добавляет при копирова...

    View More
    0 270 15:33
Feedback: 2
+1
а где кнопка демо? она невидима? куда спрятали? всё перерыл, ваще ни в одном материале не вижу её
iMadeas
0
Убрали демонстрации, да и в этом материале демка особо не нужна. Если хотите, один из примеров можете найти на нашем сайте, просто наведите на кнопки соцсетей.

Leave a Comment

Имя *:
Email *:
Код *:
Menu