title: Onclick CSS button effect
body: <p>I'm creating a CSS button and I'm trying to make an onclick effect: when the user clicks on the button it would push down the button text by 1px. My problem here is that it's pushing the whole bottom of the button. How would you proceed?</p>
  
  <pre><code>&lt;div class="one"&gt;
      &lt;p&gt;&lt;a id="button" href=#&gt;Button&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>#button {
      display: block;
      width:150px;
      margin:10px auto;
      padding:7px 13px;
      text-align:center;
      background:#a2bb33;
      font-size:20px;
      font-family: 'Arial', sans-serif;
      color:#ffffff;
      white-space: nowrap;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
  
  }
  
  #button:active {
      vertical-align: top;
      padding-top: 8px;
  }
  
  .one a {
      text-decoration: none;
  }
  </code></pre>