Css Animate Social Buttons

css-animate-social-buttons.markdown

Css Animate Social Buttons

A Pen by Ali Duman on CodePen.

License.

index.html

<div class="share-buttons">
    <a href="#" class="sah share"><i class="fa fa-share-alt"></i></a>
    <div class="share_container">
        <a href="#" class="sah pinterest"><i class="fa fa-pinterest"></i></a>
        <a href="#" class="sah facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="sah twitter"><i class="fa fa-instagram"></i></a>
    </div><!-- /.share_container -->
</div>

style.scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
@mixin box-shadows($x,$y,$blur,$spread,$color){
  -webkit-box-shadow: $x $y $blur $spread $color;
  -moz-box-shadow: $x $y $blur $spread $color;
  box-shadow: $x $y $blur $spread $color;
}
@mixin transition-transform($time){
  -webkit-transition: transform $time ease-in-out;
  -moz-transition: transform $time ease-in-out;
  -ms-transition: transform $time ease-in-out;
  -o-transition: transform $time ease-in-out;
  transition: transform $time ease-in-out;
}
@mixin transition-all($time){
  -webkit-transition: all $time ease-in-out;
  -moz-transition: all $time ease-in-out;
  -ms-transition: all $time ease-in-out;
  -o-transition: all $time ease-in-out;
  transition: all $time ease-in-out;
}

body{
  background-color: #000;
  position: fixed;
  height: 100%;
  width: 100%;
}
.share-buttons {
  > .share {
    position: absolute;
    width: 19px;
    height: 28px;
    top: 15px ;
    left: 15px;
    font-size: 18px;
    text-align: center;
    padding: 9px 10px 2px 10px;
    background: #fff;
    color: #000;
    margin-right: 4px;
    margin-left: 0;
    @include border-radius(50%);
    @include box-shadows(0,0,10px,-5px,#000);
    &:hover {
      background-color: #fff;
      color: #000;
    }
  }
  &:hover{
    .share_container{
      width: 140px;
      opacity: 1;
      @include transition-all(0.4s);
      a.sah {
        display: inline-block;
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
        @include transition-transform(0.3s);
      }
    }
  }
  .share_container {
    position: absolute;
    overflow: hidden;
    top: 15px;
    left: 55px;
    padding-left: 10px;
    width: 0;
    height: 40px;
    opacity: 0;
    @include transition-all(0.4s);
    a.sah {
      display: inline-block;
      width: 19px;
      height: 28px;
      font-size: 18px;
      text-align: center;
      padding: 9px 10px 2px 10px;
      background: #fff;
      color: #000;
      margin-right: 4px;
      margin-left: 0;
      margin-bottom: 5px;
      @include box-shadows(0,0,10px,-5px,#000);
      @include border-radius(50%);
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
      &.pinterest {
        &:hover {
          background-color: #c92228;
        }
      }
      &.twitter {
        &:hover {
          background-color: #0084b4;
        }
      }
      &.facebook {
        &:hover {
          background-color: #3b5998;
        }
      }
      &:hover {
        color: #fff;
      }
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />