Social Media Icons

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Social Media Icons | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Social Media Icons">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" />
</head>
<body >

	<ul class="menu bottomRight">
		<li class="share top">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  <ul class="menu bottomLeft">
		<li class="share right">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  
	  <ul class="menu topLeft">
		<li class="share bottom">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  
	  <ul class="menu topRight">
		<li class="share left">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <div class="container">
		<h1>Social Media Icons</h1>
	  </div>
	  

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 body {
	 background-color: #b2b1cf;
	 font-family: 'Montserrat', sans-serif;
}
 .container {
	 height: 70px;
	 padding: 55px;
	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
	 text-align: center;
}
 .menu {
	 z-index: 999;
	 position: fixed;
	 padding: 0;
	 margin: 0;
	 list-style-type: none;
}
 .menu .share i.fa {
	 height: 50px;
	 width: 50px;
	 text-align: center;
	 line-height: 50px;
	 background-color: #fff;
	 border-radius: 2px;
}
 .menu .share:hover.bottom .submenu li:nth-child(1) {
	 opacity: 1;
	 top: 50px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.08s;
}
 .menu .share:hover.bottom .submenu li:nth-child(2) {
	 opacity: 1;
	 top: 100px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.16s;
}
 .menu .share:hover.bottom .submenu li:nth-child(3) {
	 opacity: 1;
	 top: 150px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.24s;
}
 .menu .share:hover.bottom .submenu li:nth-child(4) {
	 opacity: 1;
	 top: 200px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.32s;
}
 .menu .share:hover.bottom .submenu li:nth-child(5) {
	 opacity: 1;
	 top: 250px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.4s;
}
 .menu .share:hover.left .submenu li:nth-child(1) {
	 opacity: 1;
	 left: -51px;
	 transform: rotate(0deg);
	 transition-delay: 0.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(2) {
	 opacity: 1;
	 left: -102px;
	 transform: rotate(0deg);
	 transition-delay: 1s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(3) {
	 opacity: 1;
	 left: -153px;
	 transform: rotate(0deg);
	 transition-delay: 1.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(4) {
	 opacity: 1;
	 left: -204px;
	 transform: rotate(0deg);
	 transition-delay: 2s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(5) {
	 opacity: 1;
	 left: -255px;
	 transform: rotate(0deg);
	 transition-delay: 2.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(1) {
	 opacity: 1;
	 left: 50px;
	 transform: rotate(0deg);
	 transition-delay: 0.08s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(2) {
	 opacity: 1;
	 left: 100px;
	 transform: rotate(0deg);
	 transition-delay: 0.16s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(3) {
	 opacity: 1;
	 left: 150px;
	 transform: rotate(0deg);
	 transition-delay: 0.24s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(4) {
	 opacity: 1;
	 left: 200px;
	 transform: rotate(0deg);
	 transition-delay: 0.32s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(5) {
	 opacity: 1;
	 left: 250px;
	 transform: rotate(0deg);
	 transition-delay: 0.4s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.top .submenu li:nth-child(1) {
	 opacity: 1;
	 top: -51px;
	 transition-delay: 0.08s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(2) {
	 opacity: 1;
	 top: -102px;
	 transition-delay: 0.16s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(3) {
	 opacity: 1;
	 top: -153px;
	 transition-delay: 0.24s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(4) {
	 opacity: 1;
	 top: -204px;
	 transition-delay: 0.32s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(5) {
	 opacity: 1;
	 top: -255px;
	 transition-delay: 0.4s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .submenu {
	 list-style-type: none;
	 padding: 0;
	 margin: 0;
}
 .menu .submenu li {
	 transition: all ease-in-out 0.5s;
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: -1;
	 opacity: 0;
}
 .menu .submenu li a {
	 color: #212121;
}
 .menu .submenu li a:hover i.fa {
	 color: #fff;
}
 .menu .submenu li a:hover.facebook i.fa {
	 background-color: #3b5999;
}
 .menu .submenu li a:hover.twitter i.fa {
	 background-color: #55acee;
}
 .menu .submenu li a:hover.googlePlus i.fa {
	 background-color: #dd4b39;
}
 .menu .submenu li a:hover.instagram i.fa {
	 background-color: #e4405f;
}
 .menu .submenu li:nth-child(1) {
	 transform: rotateX(45deg);
}
 .menu .submenu li:nth-child(2) {
	 transform: rotateX(90deg);
}
 .menu .submenu li:nth-child(3) {
	 transform: rotateX(135deg);
}
 .menu .submenu li:nth-child(4) {
	 transform: rotateX(180deg);
}
 .menu.topLeft {
	 top: 10px;
	 left: 10px;
}
 .menu.topRight {
	 top: 10px;
	 right: 10px;
}
 .menu.bottomLeft {
	 bottom: 10px;
	 left: 10px;
}
 .menu.bottomRight {
	 bottom: 10px;
	 right: 10px;
}
 

                                    
Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Table responsive avec css native

Table responsive avec css native

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Profile page with b4

Profile page with b4

Geocoded Locations

Geocoded Locations

Form login 03

Form login 03

Form Création de compte style animée

Form Création de compte style animée

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter une pagination1

Ajouter une pagination1