Memasang kode CSS Button Hover Rotate
Kode ini menampilkan Tombol Sosial Media yang berputar. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
      @import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
html { overflow:hidden;    }
body { background:#EDEABB; }

.menuitem {
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
        -moz-transition: -moz-transform 300ms ease-in-out;
                  transition: transform 300ms ease-in-out;
}
.menuitem:nth-of-type(1) {
  z-index:20;
  background:#3b5998;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #d2d2d2,0 0 0 1px #133783;
}
.menuitem:nth-of-type(2) {
  z-index:18;
  background:#00aced;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #00aced;
}
.menuitem:nth-of-type(3) {
  z-index:16;
  background:#cc2226;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f5f5f5,0 0 0 1px #333;
}
.menuitem:nth-of-type(4) {
  z-index:14;
  background:#201f1f;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f4cab1,0 0 0 1px #201f1f;
}
.menuitem:nth-of-type(5) {
  z-index:12;
  background:#f4a221;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #e47408;
}

.menuitem a {
  text-decoration:none;
  display:block;
  border-radius:50%;
  height:100%;
  width:100%;
  font-size:1.9em;
  line-height:2;
  text-align:center;
}

.fontawesome-facebook  { color:#fff; }
.fontawesome-twitter   { color:#fff; }
.fontawesome-pinterest { color:#f5f5f5; }
.fontawesome-github    { color:#f9f9f9; }
.fontawesome-rss       { color:#f5f5f5; }

.menuitem:hover {
  z-index:25;
  -webkit-transform:scale(1.3);
     -moz-transform:scale(1.3);
          transform:scale(1.3);
}
    </style>
<div class="menuitem">
<a class="fontawesome-facebook" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-twitter" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-pinterest" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-github" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-rss" href="https://Your Link"></a>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
      var maxspeed = 0.14,
    minspeed = 0.03,
    speed = maxspeed,
    radius = 50,
    count = 0;

function rotate() {
    var x = $(document).width() / 2,
        y = $(document).height() / 2,
        length = $('.menuitem').length;

    $('.menuitem').each(function () {
        var angle = count * (Math.PI / 180),
            newx = x + Math.cos(angle) * radius - $(this).width() / 2,
            newy = y + Math.sin(angle) * radius - $(this).height() / 2;
        $(this).css({
            'left': newx + 'px',
                'top': newy + 'px'
        });
        count += 360 / length + speed;
    });
}

$(function () {
    setInterval(rotate, 3000 / 360);
    $(window).mousemove(function (e) {
        var dw = $(document).width(),
            dh = $(document).height(),
            mh = $('.menuitem').height(),
            mw = $('.menuitem').width();

        if (e.pageX > dw / 2 - radius - mw / 2 && e.pageX < dw / 2 + radius + mw / 2 && e.pageY > dh / 2 - radius - mh / 2 && e.pageY < dh / 2 + radius + mh / 2) {
            speed = minspeed;
        } else {
            speed = maxspeed;
        }
    });
});
      //@ sourceURL=pen.js
    </script>
Penjelasan :
Terapkan Link Title pada code yang berwarna magenta, tambahkan background gambar jika diperlukan,
Copy kode berikut pastekan dibawah kode :  //@ sourceURL=pen.js
                          </script>
kemudian klik publish selesai
<style class="background-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 } 
 </style>
Edited by. Myscript2010
Sources by. John Motyl on Codepen