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

Горизонтальные Соц. Кнопки с эффектом CSS3

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

Эти уникальные по своему кнопки, можно настроить под меню, которые объединяют две горячие тенденции, что являются плоский стиль, это отсутствие фасок, градиентов и теней. И второй он безусловно выстроен на фотошоп, так как на нем идут ссылки, под формат PNG, где изначально можно задать фон по умолчанию. А вот когда будет эффект, то он может изменятся.

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

Так по умолчанию шел код, где можете аналогично выставить по форме.

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

HTML

Код

<ul class="seakilogtus_mgesabrta">
<li><a href="http://www.dynamicdrive.com" title="Search"></a> zornet</li>
<li><a href="Ссылка"></a> Скрипт</li>
<li><a href="Ссылка"></a> RSS</li>
<li><a href="Ссылка"></a> Twitter</li>
<li><a href="Ссылка"></a> Кнопка</li>
</ul>

<ul class="seakilogtus_mgesabrta zorgasemun">
<li><a href="http://zornet.ru"><img src="http://zornet.ru/Ajaxoskrip/Aabger/rss-heart.png" /></a></li>
<li><a href="http://zornet.ru/load/81"><img src="http://zornet.ru/Ajaxoskrip/Aabger/twitter-heart.png" /></a></li>
<li><a href="http://zornet.ru/load/142"><img src="http://zornet.ru/Ajaxoskrip/Aabger/facebook-heart.png" /></a></li>
<li><a href="http://zornet.ru/news"><img src="http://zornet.ru/Ajaxoskrip/Aabger/google-heart.png" /></a></li>
<li><a href="http://zornet.ru/load/84"><img src="http://zornet.ru/Ajaxoskrip/Aabger/stumble-heart.png" /></a></li>
</ul>

CSS

Код

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

ul.seakilogtus_mgesabrta li {
  margin: 0;
  display: inline-block;
  width: 98px;
  height: 98px;
  margin-right: 7px;
  background: rgba(224, 223, 223, 0);
  text-transform: uppercase;
  text-align: center;
}

ul.seakilogtus_mgesabrta li a {
  display: table;
  font: bold 41px Arial;
  width: 98%;
  height: 98%;
  margin-bottom: 4px;
  color: #ececec;
  background: #1a506f;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms cubic-bezier(0, 0, 0.4, 1.01);
}

ul.seakilogtus_mgesabrta li:nth-of-type(1) a{
  color: #f5f2f2;
  background: #a93609;
  text-shadow: 0 1px 0 #100f0f;
  border-radius: 85px;
}

ul.seakilogtus_mgesabrta li:nth-of-type(2) a{
  background: #a0ab14;
  border-radius: 76px;
  text-shadow: 0 1px 0 #272525;
}

ul.seakilogtus_mgesabrta li:nth-of-type(3) a{
  background: #265d7d;
  border-radius: 76px;
  text-shadow: 0 1px 0 #272829;
}

ul.seakilogtus_mgesabrta li:nth-of-type(4) a{
  color: #f5f1f1;
  background: #544837;
  border-radius: 53px;
  text-shadow: 0 1px 0 #1b1d1f;
}

ul.seakilogtus_mgesabrta li:nth-of-type(5) a{
  background: #c18b10;
  border-radius: 91px;
  text-shadow: 0 1px 0 #2d2e2f;
}

ul.seakilogtus_mgesabrta li a span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  width: 98%;
  height: 98%;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms cubic-bezier(0, 0, 0.35, 0.91);
}

ul.seakilogtus_mgesabrta li b {
  display: block;
  position: relative;
  width: 98%;
  opacity: 0;
  -webkit-transition: all 300ms ease-out 0.2s;
  -moz-transition: all 300ms ease-out 0.2s;
  transition: all 300ms cubic-bezier(0, 0, 0.4, 1) 0.2s;
}

ul.seakilogtus_mgesabrta li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}

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

ul.seakilogtus_mgesabrta li:hover a span {
  color: #171515;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

ul.seakilogtus_mgesabrta li:hover b{
opacity: 1;
}

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

ul.zorgasemun li a:hover{
  background: rgba(183, 180, 180, 0) !important;
}

Социальные иконки во втором примере можно найти здесь.

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

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

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

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

Kosten

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