Social Links V1 V2 V3

CSS V1

#fs-links {
	list-style: none; /* usunięcie punktorów z elementów listy*/
	position: fixed; /* dzięki temu slider pozostaje w miejscu podczas przewijania */
	right: -174px; /* szerokosc elementu listy li - szerokosc ikony (i). Jeżeli zmieniasz tą wartość musisz także zmienić w #f-links > li:hover */
	top: 30%; /* odleglosc linkow od gory okna przegladarki */
}

/* Reset - ciężko jest przewidzieć zachowanie slidera dla każdego motywu, ale to powinno wszystko zresetować */
#fs-links, #fs-links * {
	margin: 0;		
	padding: 0;
	font-size: 0;
	line-height: 0;
}

/* element listy */
#fs-links > li {
	margin-bottom: 5px; /* Dolny margines - odległość między linkami */
	width: 220px; /* długość linka */
	position: relative;
	display: block;
	height: 46px; /* wysokość linka */
	background: rgba(255,255,255,0.7); /* tło linka */
	border-radius: 46px 0 0 46px; /* Zaokraglenie kątów - powinny być takie same jak wysokość linka */
	overflow: hidden;
	left: 0;

	-webkit-transition: all .4s linear; /* prędkość i rodzaj animacji */
	-o-transition: all .4s linear; /* prędkość i rodzaj animacji */
	transition: all .4s linear; /* prędkość i rodzaj animacji */
}

#fs-links li:hover {
	left: -174px; /* Po najechaniu link zostanie wysunięty o 174 px, najlepiej aby wartość była taka sama jak w #f-links {right: x;} */
}

/* link */
#fs-links li a {
	display: block;
	line-height: 46px; /* środkuje tekst linku w pionie, powinien byc taki sam jak wysokość linka */
	height: 46px; /* wysokość linka */
	font-size: 14px; /* rozmiar czcionki */
	margin-left: 48px; /* lewy margines - powinien być taki sam jak szerokość ikony + kilka pikseli na oddzielenie tekstu od ikony */
	text-align: left; /* wyrównanie tekstu w linku */
	font-family: Arial, sans-serif; /* krój czcionki */
	color: #888; /* kolor czcionki */
}

/* ikona */
#fs-links i {
	display: block;
	width: 40px; /* szerokość ikony */
	height: 40px; /* wysokość ikony */
	text-align: center;
	line-height: 40px; /* wyrównanie w pionie, powinna być taka sama jak wysokość ikony */
	font-size: 20px; /* rozmiar ikony */
	color: #fff; /* kolor ikony */
	background: #ddd; /* tło ikony */
	position: absolute;
	top: 3px; /* odleglosc od górnej krawedzi linka do górnej krawędzi ikony - ta wartosc x2 (czyli domyślnie 6) + wysokość ikony 40px powinny dać wynik równy wysokości linka, aby ikona była ładnie wyśrodkowana w pionie */
	left: 3px; /* odległość od lewej krawędzi linka do lewej krawędzi ikony */
	border-radius: 50%; /* zaokrąglenie ikony */
	cursor: pointer;
}

HTML

<ul id="fs-links">
	<li id="fs-links-facebook">
		<i class="fa fa-facebook"></i>
		<a href="#">Polub nas na Facebooku</a>
	</li>
	<li id="fs-links-twitter">
		<i class="fa fa-twitter"></i>
		<a href="#">Śledź nas na Twitterze</a>
	</li>
	<li id="fs-links-google-plus">
		<i class="fa fa-google-plus"></i>
		<a href="#">Dodaj nas na Google+</a>
	</li>
</ul>