A CodePen by Sara Soueidan. Open/Fold Down Twitter Share Button

index.html

<h2>Click to Open and tweet <br/><span><i>best viewed in Chrome</i></span></h2>
<div class="wrapper">
  <div class="tweet">
    <button> <span class="icon-twitter"></span>     Tweet</button>
    <div class="count">10.5K</div>
  </div>
  <div class="cover">
    <span class="icon-twitter"></span>
  </div>
</div>
<p><a href="http://codepen.io/SaraSoueidan/full/ALcxq">Previous Pen: Fold-Up Mobile Menu Concept >></a><p>

script.js

/*

Concept and Design by: Erik Deiner

Original Shot: http://dribbble.com/shots/457259-Twitter-Button-Concept


*/

style.css

*{box-sizing: border-box;}
body{
  background: url('http://firstpremiervideo.com/wp-content/uploads/2011/12/hd_bg_blue_white_circle.jpg') center;
  line-height:1.2;
}
h2{
  text-align: center;
  color: #4AB3D8;
  text-shadow: 1px 1px #eee;
}
h2 span{font-size: 0.5em;}
.wrapper{
  margin:30px auto;
  width:200px;
  position: relative;
  box-shadow: 0 1px 0 1px rgba(0,0,0,0.1);
  
  perspective:800px;
}
.cover {
  color: white;
  text-shadow: 0 2px 2px rgba(0,0,0,0.3);
  font-size: 3em;
  width: 200px;
  height:70px;
  background: linear-gradient(#30CCFC, #2CC5EF);
  text-align:center;
  position:absolute;
  top:0; left:0;
  box-shadow: inset 0 0 1px 1px #54AED0;
  cursor: pointer;
  
  transform-style: preserve-3d; 
  transition: all 0.3s ease-out; 
  transform-origin: bottom center;
  /*visibility:hidden;*/
}
.wrapper:hover .cover{
  transform: rotateX(-180deg);
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.3),
    inset 0 0 1px 1px #54AED0;
  background: linear-gradient(#33CEFE, #38D6FD);
}
.tweet{
  background: linear-gradient(#EAEDF2, #F1F2F7);
  height:70px;
  border: 2px solid white;
  box-shadow: inset 0 2px 2px #D1D5D8,
    0 0 1px rgba(0,0,0,0.1);
  padding: 20px;
}

button{
  background: linear-gradient(#FDFDFD, #DEDCDF);
  border: 1px solid #C3C7C8;
  border-radius: 2px;
  height:30px;
  width:100px;
  text-shadow: 1px 1px white;
  font-weight:bold;
}
button span {
  color: #0298D3;
  font-size: 1.3em;
}
.count { 
  position: relative; 
  background: #ffffff; 
  border: 1px solid #AEB4B4; 
  height:20px;
  font-size: 0.8em;
  display:inline;
  padding: 5px;
  border-radius: 2px;
  margin-left:5px;
} 
.count:after, .count:before { 
  right: 100%; 
  border: solid transparent; 
  content: " "; 
  height: 0; width: 0; 
  position: absolute; 
  pointer-events: none; 
} 
.count:after { 
  border-color: rgba(255, 255, 15, 0); 
  border-right-color: #ffffff; 
  border-width: 5px; 
  top: 50%; 
  margin-top: -5px; 
} 
.count:before { 
  border-color: rgba(174, 180, 180, 0); 
  border-right-color: #AEB4B4; 
  border-width: 6px; 
  top: 50%; 
  margin-top: -6px; 
}
p a{
 float:right;
  text-decoration: none;
  color: #4AB3D8;
  text-shadow: 0 1px 1px white;
  font-weight: bold;
  margin-right: 50px;
}