title: Arranging buttons side by side
body: <p>please help me arrange these 3 buttons horizontally like this photoshopped image:</p>
  
  <p><img src="https://i.stack.imgur.com/Ospxi.png" alt="made with photoshop"></p>
  
  <p>Please take a look at the code <a href="http://jsfiddle.net/FzYkJ/1/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>CSS: </p>
  
  <pre><code>a.facebookbt {
      background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0;
      width: 132px;
      height: 52px;
      display: block;
  }
  a.facebookbt:hover { background-position: 0 -52px; }
  a.facebookbt:active { background-position: 0 -104px; }
  
  a.twitterbt {
      background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -132px 0;
      width: 132px;
      height: 52px;
      display: block;
  }
  a.twitterbt:hover { background-position: -132px -52px; }
  a.twitterbt:active { background-position: -132px -104px; }
  
  a.abpbt {
      background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -265px 0;
      width: 286px;
      height: 50px;
      display: block;
  }
  a.abpbt:hover { background-position: -265px -52px; }
  a.abpbt:active { background-position: -265px -104px; }​
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class="facebookbt" href="javascript:;"&gt;&lt;/a&gt;
  
  &lt;a class="twitterbt" href="javascript:;"&gt;&lt;/a&gt;
  
  &lt;a class="abpbt" href="javascript:;"&gt;&lt;/a&gt;​
  </code></pre>