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);
}