title: HTML Button : Navigate to Other Page - Different Approaches
body: <p>There are multiple ways to create a HTML button to navigate to other page.</p>
  
  <p><strong>Method 1</strong></p>
  
  <pre><code>&lt;button id="btn_click"&gt;Click Me&lt;/button&gt;
  &lt;script&gt;
  $('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
  &lt;/script&gt;
  </code></pre>
  
  <ul>
  <li>Advantage: Separate JS from HTML (MVC)</li>
  <li>Disadvantage: Long codes, rely on JS</li>
  <li>Note: jQuery selector is optional, can use traditional JavaScript</li>
  </ul>
  
  <p><strong>Method 2</strong></p>
  
  <pre><code>&lt;button onclick="window.location='http://www.google.com'"&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <ul>
  <li>Advantage: 1-liner, no need assign ID to button</li>
  <li>Disadvantage: Mix JS with HTML, rely on JS</li>
  </ul>
  
  <p><strong>Method 3</strong></p>
  
  <pre><code>&lt;a class="click-me" href="http://www.google.com"&gt;Click me&lt;/a&gt;
  &lt;style&gt;
  .clickMe {
      -moz-appearance: button;
      -ms-appearance: button;
      -o-appearance: button;
      -webkit-appearance: button;
      appearance: button;
      text-decoration: none;
      color: #000;
      padding: 0.2em 0.4em;
  }​
  &lt;/style&gt;
  </code></pre>
  
  <ul>
  <li>Advantage: no need to rely on JS</li>
  <li>Disadvantage: Looks like a fake button, IE9+ required ( <code>appearance</code> is a CSS3 property )</li>
  <li>Note: this is from <a href="https://stackoverflow.com/a/13348602/188331">here</a></li>
  </ul>
  
  <p><strong>Method 4</strong></p>
  
  <pre><code>&lt;form action="http://www.google.com"&gt;
  &lt;button&gt;Click Me&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <ul>
  <li>Advantage: Shortest code, no need to rely on JS</li>
  <li>Disadvantage: Misuse of <code>&lt;form&gt;</code> tag. Does not work if there is another submit button</li>
  </ul>
  
  <p>Programmers, which approaches is the most efficient (and hence used widely), and why?</p>
  
  <p><em>Note:</em> can we make this as community wiki ?</p>