» »

Красивые кнопки нового поколения для uCoz


Здравствуйте, вот решил выложить замечательные кнопочки. Кнопки легко регулируются через CSS,
цвет кнопки и цвет при наведении курсором. И чем больше надпись слово, тем больше становится кнопка.
Я кнопки сделал как,поделится в соц сетях,а вы можете их исправить под себя!
Установка!

Это код самих кнопок,ставим куда вам угодно.

Код
  
<right><div class="weasoc">  
  <div class="left">  
<div class="left"><a href="https://twitter.com/share" rel="nofolow" target="_blank">Twitter</a></div>  
<div class="left"><a href="http://www.facebook.com/sharer.php" rel="nofolow" target="_blank">Facebook</a></div>  
<div class="left"><a href="https://plus.google.com/share?url=http://cs-nawigator.ru/" rel="nofolow" target="_blank">Google</a></div>  
<div class="left"><a href="http://vk.com/share.php?title=Каталог%20файлов%20-%20CS-NawigatoR.Ru%20Все%20для%20сайта%20UcoZ%20и%20разной%20тиматики..&url=http://cs-nawigator.ru/" rel="nofolow" target="_blank">Vkontakte</a></div>  
  </div>


Этот код в CSS стили.

Код
.weasoc{width:250px;display:block;margin:10px 0 0 30px;float:left;font-family: 'WebSymbolsRegular';}  
.weasoc a:link,.weasoc a:visited{padding:15px 14px;font-size:14pt;color:#E0E0E0;margin:5px;background:#111;box-shadow:0 0 0 2px #0f84b4, 0px -2px 11px -7px #fff;display:inline-block;border-radius:25px;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;}  
.weasoc a:hover{margin:5px;box-shadow:0 0 0 2px #0f84b4, 0px 7px 11px -7px #fff, inset 0 1px 2px #000;background:#222;}


Ждем коментарии за материал!

Рипнуто сайтом - cs-nawigator.ru
13.04.2016 Просмотров: 454 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Maryges
Maryges 13.04.2016 15:131
0
Кнопки может и красивые, это кому как, но они только на низ сайта, который широкий, но не устанавливать же на вверх, но очень много места займут.
Kosten
Kosten 13.04.2016 15:172
0
Maryges, так они больше всего с низа сайты и были взяты.
vitsavu
vitsavu 13.04.2016 15:223
0
Это правильно костен говорит ,но на не которых сайтах такие же кнопки
стоят:НАПРИМЕР = кнопка в шапке под названием - СОЗДАТЬ САЙТ и тд и тп!
csretven
csretven 13.04.2016 15:315
0
vitsavu, зачем эти кнопки, они сняты с низ сайта, где сам футер, это 2 большие разницы, кнопки, которые вообще не кому не нужны, и низ сайта.
vitsavu
vitsavu 13.04.2016 15:386
0
csretven, я эти кнопки применял даже в каталоге файлов например скачать,Demo,Источник и тд с дополнительными скриптами и операторами,просто это вам кнопки выклали и подойдут они везде ,а вы уже сами шевелите мозгами куда и как их пременять.
FeStemBer
FeStemBer 13.04.2016 15:234
0
Не чего такого в них не вижу, это простые стили, зайдите на любой сайт, который предоставляет и разжевывает по теме стили, вы лучше соберете кнопку, а здесь просто сделали под социальный проект.
Maryges
Maryges 13.04.2016 15:407
0
Сейчас в поиск зашел и вбил в поиск информации полно, это на тот случай, если кто хочет примерно такой обвод сделать.
Tergran
Tergran 15.04.2016 18:258
0
Видел низ сайта под эти кнопки, не чем не отличается от других, только из ходящих ссылок больше, и также темного цвета.
avatar