ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вертикальная версия Соц. Кнопок с эффектом CSS3

Вертикальная версия Соц. Кнопок с эффектом CSS3

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

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

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

Так они визуально смотрятся, где проверены на работоспособность.

Кнопки с плоским дизайн

Приступаем к установке:

HTML

Код

CSS

Код

ul.karsanulpogman {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-perspective: 10000px;
  -moz-perspective: 10000px;
  perspective: 10000px;
}

ul.karsanulpogman li {
  margin: 0;
  display: block;
  width: 99px;
  height: 99px;
  margin-bottom: 0;
  background: #fdf7f7;
  text-transform: uppercase;
  text-align: center;
}

ul.karsanulpogman li a{
display:table;
font: bold 35px Arial;
width: 99%;
height: 99%;
color: black;
background: #4d9fce;
text-decoration: none;
outline: none;
-webkit-transition:all 299ms ease-out;
-moz-transition:all 299ms ease-out;
transition:all 299ms ease-out;
}

ul.karsanulpogman li:hover a{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #a4cbd4;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.daskitan li a {
  background: rgba(239, 239, 239, 0) !important;
}

ul.daskitan li a:hover{
  background: rgba(187, 182, 182, 0) !important;
}

Здесь не задействован Javascript, все создано на чистом CSS, что грузит по минимальному.

Демонстрация

14 Мая 2018 Просмотров: 1031 Комментариев: (0)

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

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

Kosten

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