Slide-out Sosial Buton With CSS

Oke sahabat blogger, pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat slide out sosial buton hanya menggunakan CSS. Sebelumnya perlu sobat ketahui keuntungan CSS dibandingkan Java script yaitu dapat mempercepat loading blog sobat. dan keuntungan lainnya silahkan cari di mbah google.

Dibawah demo slide-out sosial butonnya.

Demo

Gunakan CSS ini untuk membuat slide-out sosial butonnya:

body {
  background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);
  padding: 2em;
  text-align: center;
}

* {
  box-sizing: border-box;
}

$button-height: 30px;
$box-width: 300px;
$box-height: 212px;

.share-buttons {
  position: absolute;
  width: $box-width;
  height: $box-height;
  padding-left: ($box-width / 2) - ($button-height / 2);
  top: 50%;
  left: 50%;
  margin-left: -($box-width / 2);
  margin-top: -($box-height / 2);

  .share-button {
    float: left;
    margin-top: 15px;

    &:first-child {
      margin-top: 0;
    }

    &:after {
      clear: both;
      display: table;
    }
  }
}

.share-button {
  display: block;
  position: relative;
  height: $button-height;

  &:hover {
    cursor: pointer;

    .share-button-primary {
      box-shadow: 1px 0 0 0 rgba(0, 0, 0, .1);
    }

    .share-button-secondary-content {
      transform: translate3d(0, 0, 0);
    }
  }
}

.share-button-primary {
  position: absolute;
  background: #fff;
  width: $button-height;
  height: $button-height;
  border-radius: ($button-height / 2);
  left: 0;
  top: 50%;
  margin-top: -($button-height / 2);
}

.share-button-icon {
  display: block;
  color: #242424;
  position: absolute;
  width: $button-height;
  line-height: $button-height;
  font-size: 16px;
  margin-top: 1px;
}

.share-button-secondary {
  overflow: hidden;
  margin-left: ($button-height / 2);
  height: $button-height;
}

.share-button-secondary-content {
  font-family: sans-serif;
  font-size: .75em;
  background: #fff;
  display: block;
  height: $button-height;
  text-align: left;
  padding-left: ($button-height * .8);
  padding-right: ($button-height * .6);
  line-height: $button-height;
  color: #242424;
  border-radius: 0 ($button-height / 2) ($button-height / 2) 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform 175ms ease;
}

Dan langkah terakhir gunakan kode HTML berikut ini.

<div class="share-buttons">
  <div class="share-button">
    <div class="share-button-secondary">
      <div class="share-button-secondary-content">
        share on twitter
      </div>
    </div>
    <div class="share-button-primary">
      <i class="share-button-icon fa fa-twitter"></i>
    </div>
  </div>

  <div class="share-button">
    <div class="share-button-secondary">
      <div class="share-button-secondary-content">
        share on facebook
      </div>
    </div>
    <div class="share-button-primary">
      <i class="share-button-icon fa fa-facebook"></i>
    </div>
  </div>

  <div class="share-button">
    <div class="share-button-secondary">
      <div class="share-button-secondary-content">
        pin on pinterest
      </div>
    </div>
    <div class="share-button-primary">
      <i class="share-button-icon fa fa-pinterest"></i>
    </div>
  </div>

  <div class="share-button">
    <div class="share-button-secondary">
      <div class="share-button-secondary-content">
        share on tumblr
      </div>
    </div>
    <div class="share-button-primary">
      <i class="share-button-icon fa fa-tumblr"></i>
    </div>
  </div>

  <div class="share-button">
    <div class="share-button-secondary">
      <div class="share-button-secondary-content">
        share on google+
      </div>
    </div>
    <div class="share-button-primary">
      <i class="share-button-icon fa fa-google-plus"></i>
    </div>
  </div>
</div>

Selamat Mencoba.