A Pen by Rıza Selçuk Saydam.

A-Pen-by-Rıza-Selçuk-Saydam.markdown

A Pen by Rıza Selçuk Saydam

A Pen by Rıza Selçuk Saydam on CodePen.

License.

index.html

<div class="knocktounlock">
  <div class="share">
    Share <span>13.1k</span>
  </div><!--share-->
  <div class="buttons">
    <div class="fb-like" data-href="http://codepen.io/rss/pen/pxuzb" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://codepen.io/rss/pen/pxuzb" data-via="rssems">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

  </div><!--buttons-->
</div><!--knocktounlock-->


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=119998374766608";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

style.css

body {
  background: #131214;
  color: #444;
  margin: 0;
}
.knocktounlock{
  width: 3000px;
  height: 30px;
  display: block;
}

.share{
  color: rgba(255,255,255,0.7);
  font-size: .95em;
  display: inline-block;
vertical-align: middle;
zoom: 1;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all,0.2s;
-moz-transition: all,0.2s;
-o-transition: all,0.2s;
transition: all,0.2s;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
padding: 5px 20px 6px;
border: 2px solid #2db2ff;
}

.share span{
  background: rgba(255,255,255,0.7);
color: rgba(81,86,91,0.8);
  padding: 0px 4px;
text-align: center;
letter-spacing: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}


.buttons,
.knocktounlock:hover .share {
position: absolute;
left: 5px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-filter: blur(5px);
}


.knocktounlock:hover .buttons{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-filter: blur(0px);

}

body *{
  
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: perspective(0) translate3d(0px, 0px, 0px);
-moz-transform: perspective(0) translate3d(0px, 0px, 0px);
-ms-transform: perspective(0) translate3d(0px, 0px, 0px);
-o-transform: perspective(0) translate3d(0px, 0px, 0px);
transform: perspective(0) translate3d(0px, 0px, 0px);
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}