Saturday, January 10, 2015

Circular Social Network

Circular Social Network



<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-codepen"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-facebook"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-google-plus"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-twitter"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-dribbble"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-linkedin"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-github"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-behance"></i>
    </div>
  </div>
</div>

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.menu {
    width: 5em;
    height: 5em;
}

.menu .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #237dac;
 color: #fff;
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: all 1s, z-index 0.3s, -webkit-transform 1s;
    transition: all 1s, z-index 0.3s, transform 1s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.menu .btn .fa {
    font-size: 3em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.menu .btn:hover .fa {
    color: #30abd5;
}

.menu .btn:hover {
    background: #f5f7fa;
}

.menu .btn.trigger {
    opacity: 1;
    z-index: 100;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.menu .btn.trigger:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    background-color: #f5f7fa;
    color: #30abd5;
}

.menu .btn.trigger:hover .line {
    background-color: #30abd5;
}

.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
    background-color: #30abd5;
}

.menu .btn.trigger .line {
    width: 60%;
    height: 6px;
    background: #fff;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
    transition: background-color 0.3s, height 0.3s, top 0.3s;
}

.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, transform 0.3s;
}

.menu .btn.trigger .line:before {
    top: -12px;
    -webkit-transform-origin: 15% 100%;
    -ms-transform-origin: 15% 100%;
    transform-origin: 15% 100%;
}

.menu .btn.trigger .line:after {
    top: 12px;
    -webkit-transform-origin: 25% 30%;
    -ms-transform-origin: 25% 30%;
    transform-origin: 25% 30%;
}

.menu .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.menu.active .btn-icon {
    opacity: 1;
    z-index: 50;
}

.menu.active .trigger .line {
    height: 0px;
    top: 45%;
}

.menu.active .trigger .line:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 110%;
}

.menu.active .trigger .line:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 110%;
}

.rotater:nth-child(1) {
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    transform: rotate(-22.5deg);
}

.menu.active .rotater:nth-child(1) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(22.5deg);
    -ms-transform: translateX(-10em) rotate(22.5deg);
    transform: translateX(-10em) rotate(22.5deg);
}

.rotater:nth-child(2) {
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-22.5deg);
    -ms-transform: translateX(-10em) rotate(-22.5deg);
    transform: translateX(-10em) rotate(-22.5deg);
}

.rotater:nth-child(3) {
    -webkit-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}

.menu.active .rotater:nth-child(3) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-67.5deg);
    -ms-transform: translateX(-10em) rotate(-67.5deg);
    transform: translateX(-10em) rotate(-67.5deg);
}

.rotater:nth-child(4) {
    -webkit-transform: rotate(112.5deg);
    -ms-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}

.menu.active .rotater:nth-child(4) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-112.5deg);
    -ms-transform: translateX(-10em) rotate(-112.5deg);
    transform: translateX(-10em) rotate(-112.5deg);
}

.rotater:nth-child(5) {
    -webkit-transform: rotate(157.5deg);
    -ms-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}

.menu.active .rotater:nth-child(5) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-157.5deg);
    -ms-transform: translateX(-10em) rotate(-157.5deg);
    transform: translateX(-10em) rotate(-157.5deg);
}

.rotater:nth-child(6) {
    -webkit-transform: rotate(202.5deg);
    -ms-transform: rotate(202.5deg);
    transform: rotate(202.5deg);
}

.menu.active .rotater:nth-child(6) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-202.5deg);
    -ms-transform: translateX(-10em) rotate(-202.5deg);
    transform: translateX(-10em) rotate(-202.5deg);
}

.rotater:nth-child(7) {
    -webkit-transform: rotate(247.5deg);
    -ms-transform: rotate(247.5deg);
    transform: rotate(247.5deg);
}

.menu.active .rotater:nth-child(7) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-247.5deg);
    -ms-transform: translateX(-10em) rotate(-247.5deg);
    transform: translateX(-10em) rotate(-247.5deg);
}

.rotater:nth-child(8) {
    -webkit-transform: rotate(292.5deg);
    -ms-transform: rotate(292.5deg);
    transform: rotate(292.5deg);
}

.menu.active .rotater:nth-child(8) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-292.5deg);
    -ms-transform: translateX(-10em) rotate(-292.5deg);
    transform: translateX(-10em) rotate(-292.5deg);
}

.rotater:nth-child(9) {
    -webkit-transform: rotate(337.5deg);
    -ms-transform: rotate(337.5deg);
    transform: rotate(337.5deg);
}

.menu.active .rotater:nth-child(9) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-337.5deg);
    -ms-transform: translateX(-10em) rotate(-337.5deg);
    transform: translateX(-10em) rotate(-337.5deg);
}

<script type='text/javascript'>
$(document).ready(function(){$(".trigger").click(function(){$(".menu").toggleClass("active")})})
</script>


Load disqus comments

15 comments

  1. Kerennnn,.... Ini penggunaan nya bisa buat blogspot mbak??

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Kalau dipake di static page, gimana tutor nya mbak?? Maaf nih nubie soalnya mbak :D

      Delete
    3. Tinggal dipasang aja kodenya di tab html

      Delete
  2. udah dicoba n blm berhasil, haahaha
    o iya mbak, ada rencana bikin template utk toko online gak?? :)

    ReplyDelete
    Replies
    1. Kl css bungkus dengan

      <style scoped="" type="text/css">
      ...KODE CSS...
      </style>


      belum ada

      Delete
  3. Berhasillll,...!!! Hahaha,...
    Makasih banyak mbakkkk,... Keren dahhhhhh,... :-bd

    ReplyDelete
  4. Cara ngasih link di tombolnya itu gimana ya Mbak ? :D

    ReplyDelete
    Replies
    1. Bisa tambahkan di dalam konten div seperti ini

      <div class="rotater">
      <div class="btn btn-icon">
      <a href='http://codepen.io' title='Codepen'><i class='fa fa-codepen'/> Codepen</a>
      </div>

      Delete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.