Don’t you have enough space to put social buttons? Do you think putting many of these buttons in the page is annoying? Then use collapsing buttons. The following code contains a share button, when clicked, a series of relevant social buttons appear. The buttons can be either used or turn back collapsed in their initial form. This could be very useful.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
<input type="checkbox" id="control" />
<label id="main-menu" for="control">
<div class="share top">
<div class="toplayer"></div>
</div>
<div class="share mid">
<div class="toplayer"></div>
</div>
<div class="share bottom">
<div class="toplayer"></div>
</div>
</label>
<div class="icon-container"><i class="fa fa-facebook fa-4x icon-3d"></i>
<a title="Share On Facebook" href="https://www.facebook.com/sharer.php?u=http://devanswer.com">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div><a class="hover-toggle" href="#"></a>
</a>
</div>
<div class="icon-container"><i class="fa fa-thumbs-o-up fa-4x icon-3d"></i>
<a title="Like On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://devanswer.com">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div><a class="hover-toggle" href="#"></a>
</a>
</div>
<div class="icon-container"><i class="fa fa-twitter fa-4x icon-3d"></i>
<a href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div><a class="hover-toggle" href="#"></a>
</a>
</div>
<div class="icon-container"><i class="fa fa-linkedin fa-4x icon-3d"></i>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://devanswer.com">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div><a class="hover-toggle" href="#"></a>
</a>
</div>
<div class="icon-container"><i class="fa fa-pinterest fa-4x icon-3d"></i>
<a href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div><a class="hover-toggle" href="#" id="final"></a>
</a>
</div>
</div>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block
}
body {
line-height: 1
}
ol,ul {
list-style: none
}
blockquote,q {
quotes: none
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
.icon-3d {
color: white;
position: absolute;
left: 10px;
top: 5px;
z-index: 200;
transition: 0.5s;
}
body {
background: #e89384;
height: 110vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
top: -20px;
}
.hover-toggle, label {
height: 75px;
width: 75px;
background: white;
margin-bottom: 1px;
cursor: pointer;
background: #2F6EA1;
border: 3px solid #884F47;
}
.border {
position: absolute;
transform-origin: center center;
width: calc(100% - 12px);
height: calc(100% - 12px);
border: 2px solid white;
top: 4px;
left: 4px;
}
label {
display: block;
position: absolute;
transition: 1s;
z-index: 100;
}
label:hover {
background: #3d89c6;
}
.share {
position: absolute;
height: 9px;
width: 9px;
background: #2F6EA1;
border-radius: 100%;
border: 2px solid white;
z-index: 100;
}
.toplayer {
height: 9px;
width: 9px;
position: absolute;
background: #2F6EA1;
z-index: 100;
border-radius: 100%;
}
.top {
z-index: 500;
right: 15px;
top: 13px;
animation: move 3s linear forwards infinite;
}
@keyframes move {
25% {
transform: translateX(-27px) translateY(-2px);
}
50% {
transform: translateX(-27px) translateY(-2px);
}
75% {
transform: translateX(0px) translateY(0px);
}
}
.bottom {
bottom: 17px;
right: 15px;
animation: move2 3s linear forwards infinite;
}
@keyframes move2 {
25% {
transform: translateX(-27px) translateY(0px);
}
50% {
transform: translateX(-27px) translateY(0px);
transform: translateX(-27px) translateY(-2px);
}
75% {
transform: translateX(0px) translateY(0px);
}
}
.mid {
top: 28px;
left: 15px;
animation: switch 3s linear forwards infinite;
z-index: 100;
}
.mid:before {
content: "";
position: absolute;
height: 2px;
width: 24px;
background: white;
transform: rotate(28deg);
top: 12px;
left: 8px;
animation: switch2 3s linear forwards infinite;
z-index: -10;
}
.mid:after {
content: "";
position: absolute;
transform: rotate(-25deg);
width: 0px;
height: 2px;
width: 24px;
top: -4px;
left: 8px;
background: white;
animation: switch3 3s linear forwards infinite;
z-index: -10;
}
@keyframes switch {
25% {
transform: translateX(34px);
}
50% {
transform: translateX(34px);
}
75% {
transform: translateX(0px);
}
}
@keyframes switch2 {
25% {
transform: translateX(-28px) translateY(2px) rotate(150deg);
}
50% {
transform: translateX(-28px) translateY(2px) rotate(150deg);
}
75% {
transform: translateY(0px) translateX(0px) rotate(28deg);
}
}
@keyframes switch3 {
25% {
transform: translateX(-28px) translateY(-3px) rotate(-150deg);
}
50% {
transform: translateX(-28px) translateY(-3px) rotate(-150deg);
}
75% {
transform: translateY(0px) translateX(0px) rotate(-25deg);
}
}
.bottomTwo {
bottom: 14px;
left: 15px;
}
.icon-container {
cursor: pointer;
position: absolute;
transition: 1s;
opacity: 0;
height: 75px;
width: 75px;
perspective: 1000px;
}
.hover-toggle {
position: absolute;
display: block;
height: 75px;
width: 75px;
}
input {
display: none;
position: absolute;
z-index: 100;
}
input:checked ~ label {
border-top-right-radius: 100px;
border-top-left-radius: 100px;
transition: 1s;
transition-delay: 0.2s;
transform: translateY(-290%);
}
input:checked ~ .icon-container:nth-child(3) {
opacity: 1;
transform: translateY(-149px);
transition: 1s;
transition-delay: 120ms;
}
input:checked ~ .icon-container:nth-child(4) {
opacity: 1;
transform: translateY(-62px);
transition: 1s;
transition-delay: 160ms;
}
input:checked ~ .icon-container:nth-child(5) {
opacity: 1;
transform: translateY(25px);
transition: 1s;
transition-delay: 200ms;
}
input:checked ~ .icon-container:nth-child(6) {
opacity: 1;
transform: translateY(112px);
transition: 1s;
transition-delay: 240ms;
}
input:checked ~ .icon-container:nth-child(7) {
opacity: 1;
transform: translateY(199px);
transition: 1s;
transition-delay: 280ms;
}
.section {
position: absolute;
height: 50%;
width: 50%;
z-index: 200;
}
.section:hover ~ .hover-toggle {
transition: 0.5s;
background: #3d89c6;
}
.one {
top: 0px;
left: 0px;
}
.one:hover ~ .hover-toggle {
transform-origin: bottom right;
transform: rotateX(11deg) rotateY(-11deg) translateZ(0px);
}
.two {
top: 0px;
right: 0px;
}
.two:hover ~ .hover-toggle {
transform-origin: bottom left;
transform: rotateX(11deg) rotateY(11deg) translateZ(0px);
}
.three {
bottom: 0px;
left: 0px;
}
.three:hover ~ .hover-toggle {
transform-origin: top right;
transform: rotateX(-11deg) rotateY(-11deg) translateZ(0px);
}
.four {
bottom: 0px;
right: 0px;
}
.four:hover ~ .hover-toggle {
transform-origin: bottom left;
transform: rotateX(-11deg) rotateY(11deg) translateZ(0px);
}
.icon-container > #final {
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
.icon-container:nth-child(7) > .icon-3d {
left: 20px;
top: 10px;
}
.icon-container:active > .icon-3d {
transform: scale(0.8);
}