<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<meta name="description" content="SVG fully scalable social icon set with animated hover effects" />
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="imagetoolbar" content="no" />
<![endif]-->  
  
<meta charset=utf-8 />
<title>SVG Share icon demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script><![endif]-->  
</head>
<body>
<div class="wrapper wrapper:after">
	<div class="share-bar">
		<div class="svg-share">
			<div class="svgicon2">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
				<g>
					<path class="twitsvg" d="M449.671,92.734c-16.254,9.811-34.256,16.933-53.416,20.771
						c-15.342-16.636-37.206-27.029-61.401-27.029c-46.451,0-84.115,38.321-84.115,85.59c0,6.709,0.744,13.241,2.179,19.507
						c-69.909-3.571-131.89-37.646-173.377-89.431c-7.242,12.64-11.389,27.344-11.389,43.029c0,29.698,14.85,55.895,37.421,71.244
						c-13.788-0.445-26.76-4.295-38.1-10.705c-0.008,0.357-0.008,0.715-0.008,1.076c0,41.47,28.995,76.062,67.475,83.928
						c-7.057,1.956-14.488,3.004-22.16,3.004c-5.42,0-10.689-0.536-15.826-1.536c10.705,34.002,41.769,58.75,78.577,59.44
						c-28.788,22.956-65.056,36.641-104.467,36.641c-6.789,0-13.485-0.402-20.065-1.196c37.226,24.284,81.441,38.459,128.943,38.459
						c154.721,0,239.33-130.428,239.33-243.534c0-3.71-0.081-7.403-0.245-11.074c16.437-12.067,30.698-27.143,41.972-44.305
						c-15.084,6.807-31.297,11.408-48.31,13.477C430.054,129.495,443.39,112.722,449.671,92.734z"/>
					<path fill="transparent" d="M426.671,0H85.343C38.406,0,0,38.405,0,85.345v341.312C0,473.625,38.406,512,85.343,512h341.328
						C473.609,512,512,473.625,512,426.655V85.345C512,38.405,473.609,0,426.671,0z M419.026,170.917
						c0.164,3.671,0.245,7.364,0.245,11.074c0,113.106-84.608,243.534-239.33,243.534c-47.502,0-91.717-14.175-128.943-38.459
						c6.58,0.794,13.276,1.196,20.065,1.196c39.411,0,75.679-13.685,104.467-36.641c-36.808-0.69-67.872-25.438-78.577-59.44
						c5.137,1,10.406,1.536,15.826,1.536c7.672,0,15.103-1.048,22.16-3.004c-38.48-7.866-67.475-42.458-67.475-83.928
						c0-0.361,0-0.719,0.008-1.076c11.34,6.41,24.312,10.26,38.1,10.705c-22.571-15.349-37.421-41.546-37.421-71.244
						c0-15.685,4.147-30.389,11.389-43.029c41.487,51.785,103.468,85.86,173.377,89.431c-1.435-6.266-2.179-12.798-2.179-19.507
						c0-47.269,37.664-85.59,84.115-85.59c24.195,0,46.06,10.393,61.401,27.029c19.16-3.838,37.162-10.96,53.416-20.771
						c-6.281,19.988-19.617,36.761-36.982,47.355c17.013-2.069,33.226-6.67,48.31-13.477
						C449.725,143.774,435.463,158.85,419.026,170.917z"/>
				</g>
				</svg>
			</div>
					
			<div class="svgicon2">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
				<g class="face-all">
					<path fill="transparent" d="M352.247,257.488h83.167l12.684-73.282h-95.851l0.116-39.677
					c0-20.68,2.631-31.791,23.84-31.756h71.452V33.488h-87.484c-75.922,0-103.777,38.454-103.777,103.125v47.593H210.19v73.282h46.204
					V442.5h95.853V257.488z"/>
					<path class="face1" d="M511.999,84.667C511.999,38.103,473.609,0,426.674,0H85.339C38.405,0,0,38.103,0,84.667v338.647
					c0,4.854,0.439,9.606,1.239,14.241h254.767V253.999H209.73v-72.731h46.275v-47.215c0-64.158,27.898-102.307,103.934-102.307h87.618
					v78.656h-71.562c-21.241-0.035-23.876,10.988-23.876,31.504l-0.116,39.362H448l-12.702,72.731h-83.294v183.556h158.757
					c0.799-4.635,1.238-9.39,1.238-14.243V84.667z"/>
					<rect x="256.394" y="442.5" fill="transparent" width="95.853" height="38.988"/>
					<path fill="transparent" d="M510.763,442.789c-6.865,36.836-41.976,65.071-83.959,65.071l-340.816,0.001
					c-41.983,0-77.106-28.237-83.972-65.072H0.779v66h511.22v-66H510.763z"/>
				
					<rect x="256.035" y="479.5" class="face1" fill="#30487A" width="95.965" height="0.116"/>
					<path class="face2" fill="#758EB4" d="M256.035,414.5H0c0,31.5,5.583,47.415,18.309,65h237.726V414.5z"/>
					<path class="face2" fill="#758EB4" d="M512,414.5H352v65h140.951C506,464,512,449,512,414.5z"/>
					<path class="face1" fill="#30487A" d="M492.951,479.5H352v0.116h-95.965V479.5H18.309c15.525,18.547,39.314,31.475,63.44,32.5h348.083
					C453.905,510.988,477.328,498.021,492.951,479.5z"/>
				</g>
				</svg>
			</div>
			
			<div class="svgicon2">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
				<g class="pint-all">
					<path class="pintsvg" d="M236.895,66.291c-63.451,7.101-126.709,58.446-129.343,131.783c-1.637,44.805,11.078,78.41,53.688,87.855
						c18.474-32.632-5.955-39.805-9.762-63.451c-15.644-96.718,111.577-162.731,178.155-95.178
						c46.073,46.783,15.739,190.646-58.57,175.713c-71.167-14.305,34.847-128.834-21.966-151.309
						c-46.175-18.28-70.703,55.884-48.81,92.737c-12.838,63.375-40.487,123.073-29.285,202.557
						c36.288-26.335,48.539-76.755,58.569-129.344c18.231,11.076,27.993,22.597,51.252,24.403
						c85.801,6.635,133.73-85.636,122.025-170.83C392.448,95.745,317.137,57.309,236.895,66.291z"/>
					<path fill="transparent" d="M426.675,0H85.324C38.199,0,0,38.21,0,85.343v341.315
						C0,473.791,38.199,512,85.324,512h341.351C473.8,512,512,473.791,512,426.658V85.343C512,38.21,473.8,0,426.675,0z
						 M280.822,342.059c-23.26-1.807-33.021-13.327-51.252-24.403c-10.03,52.589-22.281,103.009-58.569,129.344
						c-11.202-79.484,16.447-139.182,29.285-202.557c-21.893-36.853,2.635-111.017,48.81-92.737
						c56.813,22.474-49.2,137.004,21.966,151.309c74.31,14.934,104.644-128.93,58.57-175.713
						c-66.578-67.553-193.799-1.54-178.155,95.178c3.807,23.646,28.236,30.819,9.762,63.451c-42.61-9.445-55.325-43.051-53.688-87.855
						c2.634-73.337,65.892-124.682,129.343-131.783c80.242-8.982,155.553,29.454,165.953,104.938
						C414.553,256.423,366.623,348.693,280.822,342.059z"/>
				</g>
				</svg>
			</div>

			<div class="svgicon2">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
				<g class="goog-all">
					<path class="goog" d="M117.954,282.574c46.005,1.369,76.867-46.349,68.931-106.599c-7.947-60.24-51.698-108.584-97.704-109.961
						c-46.013-1.365-76.87,44.741-68.926,105C28.196,231.248,71.931,281.201,117.954,282.574z"/>
					<path class="goog" d="M123.911,382.673c-13.573-13.167-24.313-29.3-24.313-49.189c0-11.805,3.782-23.168,9.067-33.261
						c-5.391,0.385-10.895,0.497-16.563,0.497c-37.178,0-68.753-12.038-92.102-31.927v33.621l0.003,100.865
						c26.72-12.688,58.444-20.312,92.94-20.312C103.75,382.968,113.654,382.673,123.911,382.673z"/>
					<path class="goog" d="M512,128V85.345C512,38.405,473.609,0,426.671,0H85.343C39.205,0,1.337,37.116,0.061,82.963
						C29.242,57.27,69.723,35.805,111.498,35.805c44.652,0,178.622,0,178.622,0l-39.974,33.809h-56.634
						c37.565,14.402,57.578,58.062,57.578,102.861c0,37.624-20.905,69.977-50.444,92.984c-28.822,22.451-34.286,31.854-34.286,50.939
						c0,16.289,30.873,44,47.016,55.394c47.19,33.269,62.458,64.156,62.458,115.728c0,8.215-1.021,16.415-3.033,24.48h153.871
						C473.609,512,512,473.625,512,426.655V160.001h-96V256h-32v-96h-95.999v-32H384V32h32v96H512z"/>
					<path class="goog" d="M156.281,406.639c-13.536-4.365-28.447-6.937-44.447-7.104c-44.809-0.482-86.554,17.471-110.108,44.186
						C9.686,482.574,44.243,512,85.343,512h143.222c0.908-5.564,1.348-11.316,1.348-17.216c0-6.268-0.767-12.396-2.188-18.361
						C220.196,447.02,193.498,432.441,156.281,406.639z"/>
				</g>
				</svg>
			</div>
		</div> <!-- end svg-share div -->
		
		<div class="bar-cover">
			<p>Share</p>
		</div>
	</div> <!-- end share-bar div -->
</body>
body {
    background: #efefef;
}

.wrapper {
	position: relative;
	text-align: center;
	font-size: 16px;
	font-size: 1rem;
}

/* the @catalinred clearfix */
.wrapper:after {
	content: "";
	display: table;
	clear: both;
}

/* this rule sets the size for all the icons inside the reveal container */
.svgicon2 {
	position: relative;
	perspective: 300px;
	transform-style: preserve-3d;
	perspective-origin: 50% 50% 0%;
	float: left;
	top: .5em;
	margin-right: 1em;
	left: 2.5em;
	height: 2em;
	width: 2em;
}

.svgicon2 .twitsvg {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	background: transparent;
	background-size: 3em 3em;
	-webkit-transform: rotateY(45deg);
	-ms-transform: rotateY(45deg);
	transform: rotateY(45deg);
	fill: #555;
	-webkit-transition: fill .3s ease-in;
	-webkit-transition: all .3s ease-in;
	-ms-transition: fill .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: fill .3s ease-in;
	transition: all .3s ease-in;
}

.twitsvg:hover {
	position: absolute;
	background: transparent;
	background-size: 3em 3em; 
	fill: #35AFEB;
	cursor: pointer;
	-ms-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.svgicon .pint-all {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	background: transparent;
	background-size: 3em 3em;
	-webkit-transform: rotateY(-45deg);
	-ms-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
	-webkit-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.svgicon2 .pint-all {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	background: transparent;
	background-size: 3em 3em;
	-webkit-transform: rotateY(-45deg);
	-ms-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
	-webkit-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.pint-all:hover {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	cursor: pointer;
}

.pint-all .pintsvg {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	fill: #555;
	left: -1em;
	margin-top: -2em;
	background: transparent;
	background-size: 3em 3em;
	-webkit-transition: fill .3s ease-in;
	-ms-transition: fill .3s ease-in;
	transition: fill .3s ease-in;	
}

.pint-all:hover .pintsvg {
	fill: #CB2027;
}

.face-all {
	position: relative;
}

.face-all:hover {
	cursor: pointer;
}

.face-all .face1 {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	fill: #555;
	-webkit-transform: rotateY(-45deg);
	-ms-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
	-webkit-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.face-all:hover .face1 {
	fill: #30487A;
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);	
	cursor: pointer;
}

.face-all .face2 {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	fill: #555;
	-webkit-transform: rotateY(-45deg);
	-ms-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
	-webkit-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.face-all:hover .face2 {
	fill: #758EB4;
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	cursor: pointer;
}

.goog-all {
	position: relative;
}

.goog-all:hover {
	cursor: pointer;
}

.goog-all .goog {
	position: absolute;
	transform-perspective: 50% 50% 0%;
	fill: #555;
	-webkit-transform: rotateY(-45deg);
	-ms-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
	-webkit-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
	margin-left: 4em;
}

.goog-all:hover .goog {
	fill:#B84F46;
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	cursor: pointer;
}

/* this sets the font for "share" and hides it when the cover is open */
.bar-cover > p {
    position: relative;
    top: -1em;
	padding-top: .4em;
	font-family: "TragicSans Medium", sans-serif;
	color: rgba(96, 132, 170, 0.7);
	font-size: 1.5em;
	text-shadow: 1px 1px 1px #fff, 0px -1px 1px #000;
	transition: color .3s ease, visibility .3s ease;
}

.share-bar:hover .bar-cover p,
.bar-cover:hover p,
.share-bar:focus .bar-cover p,
.bar-cover:focus p {
	color: rgba(127, 93, 59, 0.3);
	text-shadow: none;
	visibility: hidden;
}

/***********************reveal container for icons, set at 3em height for 2em icons**************************************************/
.share-bar {
	transform-style: preserve-3d;
	postion: relative;
	perspective: 500px;
	transition-perspective: 50% 50% 0%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4rem;
	height: 3em;
	width: 16em;
	border-radius: 2em;
	-webkit-background: repeating-linear-gradient(180deg, rgba(255, 255, 221, 0.3), rgba(155, 155, 138, 0.3) 10%),
				repeating-linear-gradient(45deg, rgba(221, 255, 255, 0.1), rgba(138, 155, 155, 0.1) 5%);
	background: repeating-linear-gradient(180deg, rgba(255, 255, 221, 0.3), rgba(155, 155, 138, 0.3) 10%),
				repeating-linear-gradient(45deg, rgba(221, 255, 255, 0.1), rgba(138, 155, 155, 0.1) 5%);
	box-shadow: inset 0 0 .5rem rgba(0,0,0,0.5);
	
}

/* reveal cover size is matched to the .share-bar. both can easily be changed to match smaller, or larger share icons: 1.5em icons, 2em height, 12em width for instance */
.bar-cover {
	position: absolute;
	top: -.1em;
	-webkit-top: 5em;
	-webkit-transform-origin: 50% 100% 0px;
	transform-origin: 50% 100% 0px;
	-webkit-transform-perspective: 50% 50% 0%;
	transform-perspective: 50% 50% 0%;
	height: 3em;
	width: 16em;
	border-radius: 2em;
	background: rgba(255, 255, 241, 1);
	box-shadow: inset 0 0 5px rgba(186,136,87,0);
	border-top: 5px solid rgba(55, 55, 55,0);
	-webkit-transform: perspective(500px) rotateY(0deg) rotateX(0deg);
	transform: perspective(500px) rotateY(0deg) rotateX(0deg);
	-webkit-transition: all .5s ease-in;
	transition: transform .5s ease-in, box-shadow .3s ease-in, border .3s ease-in .2s, top .3s ease-in, background .3s ease-out .3s;
	
}

.share-bar:hover .bar-cover,
.bar-cover:focus {
	position: absolute;
	top: -.2em;
	-webkit-top: 4.8em;
	backface-visibility: visible;
	-webkit-transform-perspective: 50% 50% 0%;
	transform-perspective: 50% 50% 0%;
	color: rgba(127, 93, 59, 0.3);
	background: rgba(5, 5, 5, 0.8);
	box-shadow: inset 0 0 5px rgba(76,76,76,0.5);
	border-top: 5px solid rgba(215, 215, 215,0.8);
	cursor: pointer;
	-webkit-transform-origin: 50% 100% 0px;
	transform-origin: 50% 100% 0px;
	-webkit-transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
	transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
}
// MS fix for IE Mobile 10
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.