title: CSS: Moving the text down a few pixels but keeping the background still?
body: <p>I have some CSS buttons that are bigger when hovered over. I have also made the text bigger however I would like to move the text down a few px without messing with the background image being used.</p>
  
  <p>help?</p>
  
  <p>my code looks like this:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;a href="index.php"&gt;Home&lt;/a&gt;
      &lt;a id="headrush"&gt;Beer Bongs&lt;/a&gt;
      &lt;a id="thabto"&gt;Novelty&lt;/a&gt;
  &lt;/div&gt;
  
  #nav a {
      background: url(Images/Button.png);
      height: 28px;
      width: 130px;
      font-family: "Book Antiqua";
      font-size: 12px;
      text-align: center;
      vertical-align: bottom;
      color: #C60;
      text-decoration: none;
      background-position: center;
      margin: auto;
      display: block;
      position: relative;
  }
  
  #nav a:hover {
      background: url(Images/Button%20Hover.png);
      height: 34px;
      width: 140px;
      font-family: "Book Antiqua";
      font-size: 16px;
      text-align: center;
      color: #C60;
      text-decoration: none;
      margin: -3px;
      z-index: 2;
  }
  
  #nav a:active {
      background: url(Images/Button%20Hover.png);
      height: 34px;
      width: 140px;
      font-family: "Book Antiqua";
      font-size: 14px;
      text-align: center;
      color: #862902;
      text-decoration: none;
      margin: 0 -3px;
      z-index: 2;
  }
  </code></pre>