Menubar and links that don't work in FF and IE

[hikingwithu2]

I have a menubar that works great in Opera 49.0 but in Firefox 57.0.2(64bit) and IE11 there are no links, therefore it doesn't work at all. If I move the link urls outside the buttons they work as expected, but the buttons are completely messed up. What could possibly be the problem?

The html looks like this:

	    <div class="w3-bar menubar ">
      <div class="h1-bar">
        <button class="btnMenu"><a href="index.html">Home</a></button>
        <button class="btnMenu"><a href="courses.html">Courses</a></button>
        <button class="btnMenu"><a href="why.html">Why English?</a></button>
        <button class="btnMenu"><a href="contact.html">Contact</a></button>
      </div>
    </div>
	

And the .css looks like this:

	.menubar {
width: 100%;
clear:both;
padding:1em;
  box-shadow:0 .07em .07em black;
  background-color:yellow;
  border-left:.43em solid orange;
  border-radius:.57em;
}
.h1-bar a {
    color:#000;
    background-color:yellow;
    box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo;
    border-radius:.57em;
    padding:.5em;
    margin-top:1em;
}
	

[Ingolme]

Don't use a button element, instead give the btnMenu class to the link itself.

[hikingwithu2]

On 12/11/2017 at 9:51 AM, Ingolme said:

Don't use a button element, instead give the btnMenu class to the link itself.

I got it working, here's the code:

	<style>
	.menubar {
width: 100%;
clear:both; 
padding:.5em;
box-shadow:0 .07em .07em black;
background-color:yellow;
border-left:.43em solid orange;
border-radius:.57em;
}
.h1-bar a {
color:#000;
background-color:yellow;
box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo;
border-radius:.57em;
padding:.5em;
margin-top:.5em;
}
.bar {
width:100%;
overflow:hidden;
display:inline-block;
}
	.btnMenu {
float:left;
background: orange;
padding:.15em;
border-radius:.57em;
margin-right:.75em;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
.btnMenu:hover {
background-color: red;
cursor: pointer;
}
.btnMenuReversed {
float:left;
background: pink;
padding:.75em;
margin:.5em;
border-radius:.57em;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
.btnMenuReversed:hover {
background-color: green;
cursor: pointer;
}
	</style>
	<div class="bar menubar">
        <div class="h1-bar">
          <div class="btnMenu"><span class="btnMenuReversed"><a href="index.html">Home</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="courses.html">Courses</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="why.html">Why English?</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="contact.html">Contact</a></span></div>
        </div>
      </div>