title: Social button with expanding hover (flipped horizontally)
body: <p>I've got an animated twitter button, made with css. But I want this effect to be flipped horizontally; the text left and the icon right. And the expanding hover effect to go from right to left. I have tried many things, but can't seem to find a solution. Is there anybody who can help me here?</p>
  
  <p><a href="http://jsfiddle.net/3rv94/" rel="nofollow">http://jsfiddle.net/3rv94/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="tbisose"&gt;
  &lt;li data-alt="Twitter"&gt;
  &lt;a class="icon twitter" 
     class="twitter-follow-button" 
     data-show-count="false" 
     href="https://twitter.com/musicradiate"&gt;Twitter
  &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#tbisose {
  list-style:none; 
  text-decoration:none; 
  font-size:0.9em; 
  font-family:trebuchet ms,sans-serif;
  }
  
  #tbisose a {
  text-decoration:none; 
  font-family:trebuchet ms,sans-serif;
  }
  
  #tbisose li {
  position:relative; 
  height:38px; 
  cursor:pointer; 
  padding: 0 !important;
  }
  
  #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter {
  position:relative; 
  z-index:5; 
  display:block; 
  float:none; 
  margin:10px 0 0; 
  width:120px; height:38px; border-radius:5px; 
  background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  
  background-color:rgba(217,30,118,.42); 
  -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
  -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  
  box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
  color:#141414; 
  text-align:left; 
  text-indent:40px; 
  text-shadow:#333 0 1px 0; 
  white-space:nowrap;  
  line-height:32px; 
  -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
  -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
  -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
  -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
  transition:width .25s ease-in-out,background-color .25s ease-in-out; 
  -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
  #tbisose li:after{position:absolute; top:0; left:40px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
  #tbisose .icon{overflow:hidden; color:#fafafa;}
  #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
  #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
  #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
  #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
  #tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
  #tbisose li:hover .icon,
  .touch #tbisose li .icon{width:110px;}
  .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
  .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
  .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
  .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
  .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
  </code></pre>