HTML Button with Hyperlink Characteristics - html

Question

I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
Does anyone know if this is doable?
Hoping for it to look something like this. Currently this is a button with an image and a span inside of it which has a hover over effect.

Answer 1

I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly...
You can bind click handlers to almost any DOM element.
...but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
So use an <a> element. All you need to do is check which mouse button was used, and that the Ctrl, Alt, and Shift keys are not pressed (otherwise the user is trying to open the link in a new tab, or other such shortcut behaviors).
document.querySelector('.btn').addEventListener('click', function (e) {
if (e.button === 0 && !e.ctrlKey && !e.altKey && !e.shiftKey) {
alert('button was clicked!');
e.preventDefault();
}
}, false);
.btn {
background-color: #8CF;
border: 1px solid #00F;
display: inline-block;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.btn:focus {
border-color: #000;
}
.btn__icon {
display: block;
margin: 0 auto;
padding: 17px 17px 0;
}
<a href="http://example.com/" class="btn">
<img class="btn__icon" src="http://placehold.it/40x40/FFF/000"/>
<span class="btn__label">Details</span>
</a>

Answer 2

I would use a link styled like a button. You can set it up to look like a button and set up click events, as well as opening it in a new tab.

Answer 3

Perhaps try something like this - style the <a> as a button (as proposed by previous answers) and then prevent default on click:
HTML
<a id = "btn" href = "http://www.google.com">CLICK ME</a>
jquery
$('#btn').click(function(e){
e.preventDefault();
alert('hello');
});
FIDDLE
This gives you a click function on the link, prevents the default action, but retains the right click context menu.

Answer 4

I'm not 100% sure I understood the question but I think this is what you mean..
<input type="button" id="button1" onclick="clickFunction()" value="Click Me!">
<script>
function clickFunction() {
document.getElementById("button1").onmousedown = function(event) {
if (event.which == 3) { <!--3 = right click-->
window.open('target', '_blank'); <!--Opens target in a new tab-->
}
}
}
</script>
I don't think that you can change the context menu that pops up to add "Open in new tab" on right click but you can tell how to handle a right click.
Edit: Actually you can change the default context menu I believe but I don't think you can do it without 3rd party libs? Again not sure about that someone else will have to give you a better answer sorry :/
Edit2: After seeing your initial edit I'd agree with #Surreal Dreams. Use styling and make a normal link with an image and hover effect :)