an experiment with hover states and social buttons
A Pen by André Givenchy on CodePen.
<link rel="stylesheet" type="text/css" href="https://gist.github.com/andregivenchy/96d567857a3d4a0dc458e0eaee829dac/raw/77ae243c6826e4252e9baeaaf6845c853e0fab59/elastic-share-btns.scss"></script>"> | |
<div class="share-btns" href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fwww.segern.com%2F&text=:%20https%3A%2F%2Fwww.segern.com%2F&via=thesegern" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20' + encodeURIComponent(document.URL)); return false;"> | |
<div class="share-btn"> | |
<div class="share-btn-secondary"> | |
<div class="share-btn-secondary-content"> | |
share to Twitter | |
</div> | |
</div> | |
<div class="share-btn-primary"> | |
<i class="share-btn-icon fa fa-twitter"></i> | |
</div> | |
</div> | |
<div class="share-btn" href"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.segern.com%2F"e=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '"e=' + encodeURIComponent(document.URL)); return false;"> | |
<div class="share-btn-secondary"> | |
<div class="share-btn-secondary-content"> | |
share on Facebook | |
</div> | |
</div> | |
<div class="share-btn-primary"> | |
<i class="share-btn-icon fa fa-facebook"></i> | |
</div> | |
</div> | |
<div class="share-btn" href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.segern.com%2F&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"> | |
<div class="share-btn-secondary"> | |
<div class="share-btn-secondary-content"> | |
pin on Pinterest | |
</div> | |
</div> | |
<div class="share-btn-primary"> | |
<i class="share-btn-icon fa fa-pinterest"></i> | |
</div> | |
</div> | |
<div class="share-btn" href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.segern.com%2F&title=&summary=&source=https%3A%2F%2Fwww.segern.com%2F" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"> | |
<div class="share-btn-secondary"> | |
<div class="share-btn-secondary-content"> | |
share via Linkedin | |
</div> | |
</div> | |
<div class="share-btn-primary"> | |
<i class="share-btn-icon fa fa-linkedin"></i> | |
</div> | |
</div> | |
<div class="share-btn" href="mailto:?subject=&body=:%20https%3A%2F%2Fwww.segern.com%2F" target="_blank" title="Send email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"> | |
<div class="share-btn-secondary"> | |
<div class="share-btn-secondary-content"> | |
share via email | |
</div> | |
</div> | |
<div class="share-btn-primary"> | |
<i class="share-btn-icon fa fa-at"></i> | |
</div> | |
</div> | |
</div> |
body { | |
background: #000; | |
padding: 2em; | |
text-align: center; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
.share-btns { | |
position: absolute; | |
width: 320px; | |
height: 212px; | |
padding-left: (320px / 2) - (36px / 2); | |
top: 50%; | |
left: 50%; | |
margin-left: -(320px / 2); | |
margin-top: -(212px / 2); | |
.share-btn { | |
float: left; | |
margin-top: 15px; | |
&:first-child { | |
margin-top: 0; | |
} | |
&:after { | |
clear: both; | |
display: table; | |
} | |
} | |
} | |
.share-btn { | |
display: block; | |
position: relative; | |
height: 36px; | |
&:hover { | |
cursor: pointer; | |
.share-btn-primary { | |
box-shadow: 1px 0 0 0 rgba(0, 0, 0, .1); | |
} | |
.share-btn-secondary-content { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
} | |
.share-btn-primary { | |
position: absolute; | |
background: #fff; | |
width: 36px; | |
height: 36px; | |
border-radius: (36px / 2); | |
left: 0; | |
top: 50%; | |
margin-top: -(36px / 2); | |
} | |
.share-btn-icon { | |
display: block; | |
color: #242424; | |
position: absolute; | |
width: 36px; | |
line-height: 36px; | |
font-size: 16px; | |
margin-top: 1px; | |
} | |
.share-btn-secondary { | |
overflow: hidden; | |
margin-left: (36px / 2); | |
height: 36px; | |
} | |
.share-btn-secondary-content { | |
font-family: sans-serif; | |
font-size: .75em; | |
background: #fff; | |
display: block; | |
height: 36px; | |
text-align: left; | |
padding-left: (36px * .8); | |
padding-right: (36px * .6); | |
line-height: 36px; | |
color: #242424; | |
border-radius: 0 (36px / 2) (36px / 2) 0; | |
transform: translate3d(-100%, 0, 0); | |
transition: transform 175ms ease; | |
} |