Dynamic Drive CSS Library- Slide Out Social Icon Buttons

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Links & Buttons: CSS3 demos: Here

Slide Out Social Icon Buttons

Author: Dynamic Drive

These space saving social buttons slide out into view one at a time when the user clicks on the main button, The social icons appear tucked away and invisible initially, by placing them inside the "back face" of a DIV and setting the DIV to "backface-visibility: hidden". To reveal the icons, the DIV is flipped to show its backside containing the icons. This novel approach lets you store away content behind another content of a different size and show the former on demand.

Slide Out Social Icon Buttons works on all major browsers and platforms (including mobile), including IE9+.

Demo:

The CSS:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<style>

body {  /* webkit adjacent sibling bug fix */
	-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
	from {padding:0;} 
	to {padding:0;} 
}

div.slideouticons{ /* main container for slide out icons */ 
	position: relative; /* change position to fixed or absolute if desired */
	-webkit-perspective: 1000px;
	perspective: 1000px;
	z-index: 1000;

}

div.slideouticons input{
	display: none;
}


div.slideouticons label.mainlabel{ /* menu anchor icon style */
	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; /* font size, pertains to icon fonts specifically */
	width: 50px; /* width of anchor icon */
	height: 50px; /* height of anchor icon */
	text-align: center;
	color: white;
	background: #80C5EC;
	border-radius: 50%;
	outline: none;
	z-index: 100000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}


div.slideouticons div.iconswrapper{ /* DIV that flips over to reveal the hidden icons */
	position: absolute;
	margin: 0;
	top: 60px; /* vertical offset of icons wrapper from the top of main container */
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}


div.slideouticons div.iconswrapper ul{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: -1;
}

div.slideouticons div.iconswrapper ul li{
	margin-bottom: 10px;
	position: relative;
	opacity: 0;
	width: 50px; /* width of social icons */
	height: 50px; /* height of social icons */
	-webkit-transform: translateY(-100%) rotate(0);
	transform: translateY(-100%) rotate(0);
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}


div.slideouticons div.iconswrapper ul li a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: white;
	text-decoration: none;
	text-align: center;
	font-size: 24px; /* font size, pertains to icon fonts specifically */
	width: 100%;
	height: 100%;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	background: #80C5EC; /* background color of icons */
	text-decoration: none;
	border-radius: 50%;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}


div.slideouticons div.iconswrapper ul li a:hover{
	background: #515151; /* background color of icons on hover */
	color: white;
}

div.slideouticons input:checked ~ label.mainlabel{
	background: navy; /* background color of toggler icon when activated */
}

div.slideouticons input:checked ~ div.iconswrapper{ /* flip icons wrapper to reveal icons when activated */
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

div.slideouticons input:checked ~ div.iconswrapper ul li{ /* rotate and shift icons into view when activated */
	opacity: 1;
	-webkit-transform: translateY(0) rotate(360deg);
	transform: translateY(0) rotate(360deg);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

div.slideouticons input:checked ~ div.iconswrapper ul li:nth-of-type(1){
	-webkit-transition-delay: 0;
	transition-delay: 0;
	z-index: 4;
}

div.slideouticons input:checked ~ div.iconswrapper ul li:nth-of-type(2){
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s; /* increment delay by 0.3s for each icon */
	z-index: 3; /* decrement z-index by 1 for each icon */
}

div.slideouticons input:checked ~ div.iconswrapper ul li:nth-of-type(3){
	-webkit-transition-delay: .6s;
	transition-delay: .6s;
	z-index: 2;
}

div.slideouticons input:checked ~ div.iconswrapper ul li:nth-of-type(4){
	-webkit-transition-delay: .9s;
	transition-delay: .9s;
	z-index: 1;
}


/* ########## Horizontal Version CSS ########## */

div.slideouticons.horizontal div.iconswrapper{
	top: 0;
	left: 60px; /* horizontal offset of icons wrapper from the left of main container */
}


div.slideouticons.horizontal div.iconswrapper ul li{
	display: inline;
	float: left;
	margin-bottom: 0;
	margin-right: 10px;
	-webkit-transform: translateX(-100%) rotate(0);
	transform: translateX(-100%) rotate(0);
}


div.slideouticons.horizontal input:checked ~ div.iconswrapper ul li{
	-webkit-transform: translateX(0) rotate(360deg);
	transform: translateX(0) rotate(360deg);
}

</style>

<!--[if lte IE 9]>
	<style>
	
		div.slideouticons div.iconswrapper{
			visibility: hidden;
		}
		div.slideouticons input:checked ~ div.iconswrapper{
			visibility: visible;
		}
	
	</style>

<![endif]-->

<!--[if lte IE 8]>
	<style>
	
		div.slideouticons{
			display: none;
		}

	</style>


<![endif]-->

The HTML:

<h1>Horizontal Version</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/ddrivegeorge" class="fa fa-twitter" title="Twitter"></a></li>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-facebook" title="Facebook"></a></li>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-google-plus" title="Google Plus"></a></li>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-pinterest-p" title="Pinterest"></a></li>
	</ul>
	</div>

</div>

<h1>Original Vertical Version</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/ddrivegeorge" class="fa fa-facebook" title="Facebook"></a></li>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-google-plus" title="Google Plus"></a></li>
	<li><a href="https://twitter.com/ddrivegeorge" class="fa fa-pinterest-p" title="Pinterest"></a></li>
	</ul>
	</div>

</div>

Code Info

Rate this code:

Date Posted: 08/05/2016

Revision History: None

Usage Terms: Click here