» »

Круглые кнопки социальных сетей для сайта

Круглые кнопки социальных сетей для сайта

Кнопки под социальные сети или на официальные ресурсе, которые можно установить на свой сайт, что отлично созданные по дизайн. Каждая из ниж идет под ссылку и безусловно само изображение будет уже обозначать, на какую тематику вы попадете. Это может быть как внутри своего интернет портала или на спонсора. Лучшем использовать в самой площадке, если не по теме, то решается по смене как не сложно, где размер в стилях задается.

Больше всего можно заметить, что их создают под категорий и задают решение под навигацию. По стилистике все шикарно выставлены, что подойдет на светлый или темный фон. Где производится по несколько пикселей обвод и формируется фигура, что веб мастер сам редактирует под свой формат шаблона.

Круглые иконки соц сети для uCoz



Ставим там где считаете нужным.

HTML

Код
<span class="taserkun"></span>  
  <span class="runimatun">  
  <a href="http://zornet.ru/"><img src="http://zornet.ru/Aben/ABGDA/ARMA.jpg" border="0"></a>  
  <a href="/"><img src="http://zornet.ru/Aben/ABGDA/vk.jpg" border="0"></a>  
  <a href="/"><img src="http://zornet.ru/Aben/ABGDA/youtube.jpg" border="0"></a>  
  <a href="/"><img src="http://zornet.ru/Aben/ABGDA/steam.jpg" border="0"></a>  
  </span>

CSS

Код
.runimatun img {display: block;float: left;width: 75px;height: 75px;margin-right: 6px;padding: 0px;border-radius: 50px;border: 4px solid #dadada;box-shadow: 0px 0px 8px 2px #929292;}  
.runimatun1 { position: absolute;  
  font-family: 'Roboto', sans-serif;  
  color: #fff;  
  float: left;  
  width: 175px;  
  height: 18px;  
  margin-top: 140px;}  

  .taserkun { position: absolute;  
  font-family: 'Roboto', sans-serif;  
  color: #fff;  
  float: left;  
  width: 175px;  
  height: 18px;  
  margin-top: 140px;}  
  .taserkun img { display: block;float: left;width: 40px;height: 40px;margin-right: 6px;padding: 0px;border-radius: 50px;border: 6px solid #50555d;}

Не забываем, что при каждой смени или редакций лучше сохранить основу, всегда пригодиться
19.10.2017 Просмотров: 377 Комментарий: (0)

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

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

Комментарий: 0
avatar