<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mavrK/pen/mPPWGN?limit=all&page=20&q=social" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
* {
-webkit-transition: 0.33s ease;
transition: 0.33s ease;
}
body {
background-color: #9ab;
}
.rela-block {
display: block;
position: relative;
overflow: hidden;
}
.side-bar {
z-index: 100;
position: fixed;
width: 80px;
top: 0;
bottom: 0;
left: 0;
background-color: #fff;
box-shadow: 4px 0px 25px -1px rgba(0,0,0,0.5);
font-family: "Raleway";
font-weight: 600;
font-size: 18px;
line-height: 24px;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-transition: 0.33s ease;
transition: 0.33s ease;
}
.side-bar:hover {
width: 250px;
}
.side-bar:hover .side-button::before {
left: 6%;
-webkit-transition: 0.33s ease, left 0.25s 0.15s ease;
transition: 0.33s ease, left 0.25s 0.15s ease;
}
.side-bar:hover .hover-svg {
height: 130px;
width: 130px;
}
.side-container {
position: absolute;
width: 100%;
}
.side-container.top {
height: 20%;
top: 1%;
}
.side-container.middle {
padding-top: 10px;
height: 65%;
top: 55%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.hover-svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 80px;
width: 80px;
fill: none;
stroke: rgba(0,0,0,0.5);
stroke-width: 2;
cursor: pointer;
-webkit-transition: 0s ease, height 0.33s ease, width 0.33s ease;
transition: 0s ease, height 0.33s ease, width 0.33s ease;
}
.hover-svg:hover {
stroke: #000;
}
.side-button {
height: 15%;
margin: 5px 0;
background-color: #e4e9e9;
cursor: pointer;
}
.side-button:hover {
background-color: #c4c9c9;
}
.side-button::before {
position: absolute;
top: 50%;
left: -250px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: 0.33s ease;
transition: 0.33s ease;
}
.side-button::after {
content: "";
position: absolute;
height: 40px;
width: 40px;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-size: cover !important;
-webkit-transition: 0.33s ease;
transition: 0.33s ease;
}
.side-button.facebook::before {
content: "Facebook";
}
.side-button.facebook:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
}
.side-button.twitter::before {
content: "Twitter";
}
.side-button.twitter:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") no-repeat center;
}
.side-button.instagram::before {
content: "Instagram";
}
.side-button.instagram:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Instagram-128.png") no-repeat center;
}
.side-button.soundcloud::before {
content: "Soundcloud";
}
.side-button.soundcloud:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_SoundCloud-128.png") no-repeat center;
}
.side-button.linked-in::before {
content: "LinkedIn";
}
.side-button.linked-in:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") no-repeat center;
}
.side-button.pinterest::before {
content: "Pinterest";
}
.side-button.pinterest:after {
background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center;
}
.plus-button {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 100;
height: 75px;
width: 75px;
border-radius: 100%;
background-color: #e91e63;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.plus-button::before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
.plus-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.plus-button.open {
-webkit-transform: rotate(45deg) scale(0.92);
transform: rotate(45deg) scale(0.92);
background-color: #333;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
}
.plus-button.open:hover {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button.open:active {
-webkit-transform: scale(0.96) rotate(45deg);
transform: scale(0.96) rotate(45deg);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.social-button {
position: absolute;
bottom: 43px;
right: 41px;
height: 50px;
width: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
background-size: 153% !important;
border-radius: 100%;
box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4);
cursor: pointer;
z-index: 99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
}
.social-button.twitter-button.active {
bottom: 110px;
right: 21px;
}
.social-button.facebook-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
}
.social-button.facebook-button.active {
bottom: 105px;
right: 73px;
}
.social-button.pinterest-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
}
.social-button.pinterest-button.active {
bottom: 67px;
right: 109px;
}
.social-button.insta-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
}
.social-button.insta-button.active {
bottom: 15px;
right: 105px;
}
</style></head><body>
<div class="side-bar">
<div class="side-container top">
<svg viewbox="0 0 120 120" class="hover-svg">
<path D="M 60 25 L 20 95 L 100 95 Z"/>
<path D="M 36 67 L 53 95"/>
<path D="M 33 72 L 47 95"/>
<path D="M 30 78 L 41 95"/>
<path D="M 27 83 L 35 95"/>
</svg>
</div>
<div class="side-container middle">
<div class="rela-block side-button facebook"></div>
<div class="rela-block side-button twitter"></div>
<div class="rela-block side-button instagram"></div>
<div class="rela-block side-button soundcloud"></div>
<div class="rela-block side-button linked-in"></div>
<div class="rela-block side-button pinterest"></div>
</div>
</div>
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function(){
// Social plus button function
$('.plus-button').click(function(){
$(this).toggleClass('open');
$('.social-button').toggleClass('active');
});
});
//# sourceURL=pen.js
</script>
</body></html>
