title: hyperlink not in whole button
body: <p>I have two buttons on the screen..</p>
  
  <pre><code> &lt;div class="checksheet"&gt;
          &lt;a href="http://some_link" target="_blank"&gt;
          &lt;input class="btn btn-large btn-primary" type="button" value='Graph Search'&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nchecksheet"&gt;
     &lt;form action="/link" method="POST"&gt;
     &lt;input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'   onclick="$('#loading').show();"&gt;
      &lt;/form&gt;
      &lt;div id="loading" style="display:none; position:relative ;left:860px"&gt;&lt;img src="{{ url_for('static', filename='img/newload.gif') }}" alt="" /&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is.. the first button.. has hyper link over a very small part of the button..
  whereas the "submit" type button.. is fine.. </p>
  
  <p>By fine I mean... that whole "submit" button is clickable.</p>
  
  <p>and in the first part.. just a very tiny strip (top part of button) is clickable...</p>
  
  <p>What am i missing.</p>