Circular Social Network

1/10/2015
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>


Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

14 comments

keren mbak, izin share yah

Balas

Nice, I appreciate.

Balas

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

Balas
This comment has been removed by the author.

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

Balas

Tinggal dipasang aja kodenya di tab html

Balas

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

Balas

Kl css bungkus dengan

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


belum ada

Balas

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

Balas

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

Balas

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>

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.