CSS3 Social Revealer buttons

gistfile1.html

<style>
.social-revealer {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 35px;
  max-width: 100%;
  background: #eee;
  padding-left: 36px;
  margin-bottom: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

  .social-revealer .social-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    background: #26bdb3;
  }
  
  .social-revealer .social-button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 45px;
    left: 0;
    vertical-align: middle;
    line-height: 35px;
  }
  
  .social-revealer .overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background: #26bdb3;
    color: #fff;
    text-align: left;
    text-indent: 10px;
    font-family: "Conqueror Sans", arial;
    font-weight: bold;
    line-height: 35px;
    overflow: hidden;
    float: right;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.15s;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: all;
    -moz-transition-duration: 0.15s;
    -moz-transition-timing-function: linear;
    -ms-transition-property: all;
    -ms-transition-duration: 0.15s;
    -ms-transition-timing-function: linear;
    -o-transition-property: all;
    -o-transition-duration: 0.15s;
    -o-transition-timing-function: linear;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
  }
  
  .social-revealer:hover .overlay {
    width: 0%;
  }
</style>

<div class="social-revealer">
	<div class="social-logo">
		<!-- Social Icon Here -->
	</div>
	<div class="social-button">
		<!-- Social Button Here -->
	</div>
	<div class="overlay"><!-- Social Text Here (ex: like, tweet, etc...) --></div>
</div>