Format Custom Javascript Buttons the Easy Way - MicroStrategy

I've previously posted a few sample of creating custom javascript buttons in MicroStrategy, typically for Documents. For example - Excel or PDF Export Button (and more to come). The HTML buttons trigger the custom Javascript but getting the HTML button formatted just right isn't always easy for a few reason.
There is a simple trick to get around having to format the button in HTML and use native out-of-box MicroStrategy functionality. Set the HTML button to transparent and overlay it on top of a native MicroStrategy button. This way you can format the button using MicroStrategy but get the custom functionality you're looking for. I've set the transparency in the snippet below.
Sample code below;
<script>
function jsTesting() {
alert("OmarVidaure.com")
}
document.getElementById("applyBtn").addEventListener("click",jsTesting);
</script>
<form name="applyForm">
<input id="applyBtn"
type="button"
style="border-width: 0pt;
height: 200px;
width: 200px;
cursor:Pointer; cursor: hand;
background-color: Transparent"
></p>
</form>
</script>
And that's it!
Thanks for checking out this blog post. If you found this post helpful please consider donating via PayPal. Any contribution is appreciated!