.social-share-btns-container  
  .social-share-btns
    %a.share-btn.share-btn-twitter{:href => "https://twitter.com/intent/tweet?text=https://codepen.io/marko-zub/#", :rel => "nofollow", :target => "_blank"}
      %i.ion-social-twitter
      Tweet
    %a.share-btn.share-btn-facebook{:href => "https://www.facebook.com/sharer/sharer.php?u=https://codepen.io/marko-zub/#", :rel => "nofollow", :target => "_blank"}
      %i.ion-social-facebook
      Share
    %a.share-btn.share-btn-linkedin{:href => "https://www.linkedin.com/cws/share?url=https://codepen.io/marko-zub/#", :rel => "nofollow", :target => "_blank"}
      %i.ion-social-linkedin
      Share
    %a.share-btn.share-btn-reddit{:href => "http://www.reddit.com/submit?url=https://codepen.io/marko-zub/&title=Marko+Zub+codepen", :rel => "nofollow", :target => "_blank"}
      %i.ion-social-reddit
      Share
    %a.share-btn.share-btn-mail{:href => "mailto:?subject=Look Fun Codepen Account&body=https://codepen.io/marko-zub/#", :rel => "nofollow", :target => "_blank", :title => "via email"}
      %i.ion-paper-airplane
      Share

  .credits
    %a{:href => "https://codepen.io/marko-zub/", :target=>'_blank'}
      My other codepens
View Compiled
@import "compass/css3";
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

* {
    &:after,
    &:before {
        @include box-sizing(border-box);
    }
}

html {
  height: 100%;
}
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #ecf0f1;
}

a {
  text-decoration: none;
}


.social-share-btns-container {
  overflow: hidden;
  position: absolute;
  left: 0;
  font-size: 0;
  top: 50%;
  margin: -30px 0;
  text-align: center;
  width: 100%;
  z-index: 111;
}


.social-share-btns {
  display: inline-block;
  overflow: hidden;
  .share-btn {
    float: left;
    margin: 0 5px;
    padding: 8px 16px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    @include transition(background 0.2s ease-in-out);

    i {
      margin-right: 5px;
      display: inline-block;
      font-size: 18px;
      vertical-align: middle;
    }
  }
}

// Colors
.share-btn {
  background-color: #95a5a6;
  &:hover {
    background-color: darken(#95a5a6, 10%);
  }
}
.share-btn-twitter {
  background-color: #00aced;
  &:hover {
    background-color: darken(#00aced, 10%);
  }
}
.share-btn-facebook {
  background-color: #3b5998;
  &:hover {
    background-color: darken(#3b5998, 10%);
  }
}
.share-btn-linkedin {
  background-color: #007bb6;
  &:hover {
    background-color: darken(#007bb6, 10%);
  }
}
.share-btn-reddit {
  background-color: #ED001C;
  &:hover {
    background-color: darken(#ED001C, 10%);
  }
}

.share-btn-mail {
	background-color: #f1c40f;
	&:hover {
		background-color: darken(#f1c40f, 5%);
	}
}

.credits {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  width: 100%;
  z-index: 1111;
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: uppercase;
  a {
    color: rgba(255,255,255,0.5);
    display: inline-block;
    padding: 4px 4px;
    text-decoration: none;
    &:hover {
      color: #fff;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.