With the use of coding skill like HTML, CSS you can do anything on your browser.
This is another kind of new way to express the power of coding. Here you can learn how to make “Social Media in a Book With CSS”.
You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.
If you don’t understand clearly so you can watch a youtube video which mentions the end of the page.

HTML

<ul class="deck">
  <li class="deck__item deck__item--facebook">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-facebook"></span>
      <span class="deck__label">Facebook</span>
    </a>
  </li>
  <li class="deck__item deck__item--instagram">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-instagram"></span>
      <span class="deck__label">Instagram</span>
    </a>
  </li>
  <li class="deck__item deck__item--twitter">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-twitter"></span>
      <span class="deck__label">Twitter</span>
    </a>
  </li>
  <li class="deck__item deck__item--linkedin">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-linkedin"></span>
      <span class="deck__label">LinkedIn</span>
    </a>
  </li>
  <li class="deck__item deck__item--pinterest">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-pinterest"></span>
      <span class="deck__label">Pinterest</span>
    </a>
  </li>
  <li class="deck__item deck__item--googleplus">
    <a class="deck__link" href="#">
      <span class="deck__icon fontawesome-google-plus"></span>
      <span class="deck__label">Google+</span>
    </a>
  </li>
</ul>

CSS

 <style type="text/css">
  @import "compass/css3";
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  overflow: hidden;
  background: #c6c6c6;
  -webkit-font-smoothing: antialiased;
}
.deck {
  position: absolute;
  width: 10em;
  height: 13em;
  top: 50%;
  left: 50%;
  margin: -6.5em 0 0 -5em;
  -webkit-backface-visibility: hidden;
  font-family: 'Ubuntu', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-align: center;
}
.deck__item {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0.3em;
  border: 0.1em solid rgba(0, 0, 0, .15);
  box-shadow: 0 0 0.3em rgba(0, 0, 0, .3), inset 0 6em 6em rgba(255, 255, 255, .1);
  transform-origin: 90% 92%;
  transition: 1s;
}
.deck__item:hover ~ .deck__item {
  transform: rotate(120deg);
}
.deck__item:last-of-type:after {
  content: "";
  position: absolute;
  left: 90%;
  top: 92%;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  background: white;
  margin: -0.6em 0 0 -0.6em;
  box-shadow: inset 0 1px 1px white, inset 0 -0.3em 0.2em #dddcdb, 0 0 0.6em rgba(0, 0, 0, .2);
}
.deck__item:last-of-type:before {
  content: "";
  position: absolute;
  right: 0.4em;
  bottom: 0.9em;
  width: 1.1em;
  height: 0.15em;
  background: silver;
  background: rgba(0, 0, 0, .1);
  z-index: 2;
}
.deck__link {
  text-decoration: none;
  display: block;
  color: white;
  color: rgba(255, 255, 255, .8);
}
ul{
    list-style: none;
}
.deck__icon {
  font-family: 'FontAwesome', sans-serif;
  font-size: 4em;
  color: black;
  color: rgba(0, 0, 0, .6);
  display: block;
  margin: 0.5em auto;
}
.deck__item--facebook {
  background: #3b5998;
  transform: rotate(-20deg);
}
.deck__item--instagram {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  transform: rotate(-10deg);
}
.deck__item--twitter {
  background: #00a0d1;
  transform: rotate(0deg);
}
.deck__item--linkedin {
  background: #0e76a8;
  transform: rotate(10deg);
}
.deck__item--pinterest {
  background: #910101;
  transform: rotate(20deg);
}
.deck__item--googleplus {
  background: #db4a39;
  transform: rotate(30deg);
}

 </style>

YouTube