[html] HTML Button : Navigate to Other Page - Different Approaches

There are multiple ways to create a HTML button to navigate to other page.

Method 1

<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>

• Advantage: Separate JS from HTML (MVC)
• Disadvantage: Long codes, rely on JS
• Note: jQuery selector is optional, can use traditional JavaScript

Method 2

<button onclick="window.location='http://www.google.com'">Click Me</button>

• Advantage: 1-liner, no need assign ID to button
• Disadvantage: Mix JS with HTML, rely on JS

Method 3

<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.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;
}?
</style>

• Advantage: no need to rely on JS
• Disadvantage: Looks like a fake button, IE9+ required ( appearance is a CSS3 property )
• Note: this is from here

Method 4

<form action="http://www.google.com">
<button>Click Me</button>
</form>

• Advantage: Shortest code, no need to rely on JS
• Disadvantage: Misuse of <form> tag. Does not work if there is another submit button

Programmers, which approaches is the most efficient (and hence used widely), and why?

Note: can we make this as community wiki ?

I use method 3 because it's the most understandable for others (whenever you see an <a> tag, you know it's a link) and when you are part of a team, you have to make simple things ;).

And finally I don't think it's useful and efficient to use JS simply to navigate to an other page.