.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;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.