Выскальзывающие социальные кнопки "расшаривания"

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<section>
<h1>Горизонтальная Версия</h1>

<div class="slideouticons horizontal">
<input type="checkbox" id="togglebox2" />
	<label for="togglebox2" class="mainlabel fa fa-share-alt"></label>	
	<div class="iconswrapper">
	<ul>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-twitter" title="Twitter"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-facebook" title="Facebook"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-google-plus" title="Google Plus"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-pinterest-p" title="Pinterest"></a></li>
	</ul>
	</div>

</div>
</section>
<section>
<h1>Вертикальная Версия</h1>

<div class="slideouticons">

	<input type="checkbox" id="togglebox" />
	<label for="togglebox" class="mainlabel fa fa-share-alt"></label>
	
	<div class="iconswrapper">
	<ul>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-twitter" title="Twitter"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-facebook" title="Facebook"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-google-plus" title="Google Plus"></a></li>
	<li><a href="https://twitter.com/dobrovoi" class="fa fa-pinterest-p" title="Pinterest"></a></li>
	</ul>
	</div>

</div>
</section>
</div>

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);
*, ::after, ::before {
    box-sizing: border-box;
}
body { 
font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
/* webkit adjacent sibling bug fix */
	-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
	from {padding:0;} 
	to {padding:0;} 
}
h1 {
  font-weight: 300;
  text-align: center;
}
.container {
    width: 100%;
    max-width: 920px;
    padding: 0 20px;
    margin: 0 auto;
}
section {
  margin-bottom: 22px;
}
div.slideouticons{ /* базовый контейнер для слайд-иконок */ 
	position: relative; /* при желании можно изменить положение на фиксированное или абсолютное */
	-webkit-perspective: 1000px;
	perspective: 1000px;
	z-index: 1000;
}

div.slideouticons input{
	display: none; /* спрячем флажок переключателя */
}


div.slideouticons label.mainlabel{ /* стили кнопки расшары */
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	font-size: 24px; /* размер шрифта, относится конкретно к шрифт-иконкам */
	width: 50px; /* ширина кнопки */
	height: 50px; /* высота кнопки */
	text-align: center;
	color: white; /* цвет текста шрифт-иконки */
	background: #26a69a; /* цвет фона иконки */
	border-radius: 50%; /* абсолютно круглая */
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	outline: none; /* убираем линии внешней границы */
	z-index: 100000; /* выше других объектов страницы */
	-webkit-transition: all 0.3s; /* плавные переходы  */
	transition: all 0.3s;
}


div.slideouticons div.iconswrapper{ /* DIV в котором размещаем скрытые развёрнутые на 180 градусов иконки  */
	position: absolute;
	margin: 0;
	top: 60px; /* вертикальное смещение оболочки иконок от верхней части основного...

JavaScript

/* ========================================================================= */
/*	shurawi --- dbmast.ru ---
/* ========================================================================= */