 <p>I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <code>&lt;a&gt;</code> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <code>&lt;a&gt;</code> tag.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn:link, .btn:visited { display: inline-block; padding: 10px 30px; font-weight: 300; text-decoration: none; color: white; border-radius: 200px; border: 3px solid #1A75BB; margin: 20px 20px 0px 0px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .btn:hover, .btn:active { background-color: #14598e; border-color: #14598e; } .btn-full:link, .btn-full:visited { background-color: #1A75BB; margin-right: 20px; } .btn-full:hover, .btn-full:active { background-color: #14598e; } .btn-ghost:link, .btn-ghost:visited { color: black; border-color: #14598e; } .btn-ghost:hover, .btn-ghost:active { color:white; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#section-one" class="btn btn-full"&gt;Why use AnyMath?&lt;/a&gt; &lt;a href="#section-two" class="btn btn-ghost"&gt;What problems can AnyMath solve?&lt;/a&gt;</code></pre> </div> </div> </p>