from comment

when you set style via javascript, it is included into a style attribute, which overwrites any other style you set from a style sheet. Instead setting new style, add a class classList.add('myNewClass') , so it can be parts of the style sheet with rules that are not the most important ones

example

document.getElementById("toggle").addEventListener("click", myFunction);

function myFunction() {
  if (this.classList.contains('pink')) {
      this.classList.toggle('darkblue');
    }
    this.classList.toggle('pink');
  };

#toggle {
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
}

#toggle:hover,
#toggle.pink:hover,
#toggle.darkblue:hover{
  background: aqua;
}

#toggle.pink {
  background-color: pink;
  color: #222;
}

#toggle.darkblue {
  background: #2c475c;
  color: white;
}

<button id="toggle">TOGGLE</button >

Because you set the background with inline style, which has greater specificity than your CSS. If you want to override any inline style, you have to make your style in CSS !important.

#toggle:hover {  
  background: aqua !important;
}

Edit

As mentioned by @G-Cyrillus, the better way is to create classes with the color you need for the button and toggle those classes (and not inline style). For you code, it would be good to create 2 classes: for pink and grey.

.pink {
  color: #222;
  background-color: pink;
}
.grey {
  color: #fff;
  background-color: #2c475c;
}

Now you just need to edit your JS file, so it works with your new classes.

function toggleButton() {
  var button = document.getElementById("toggle");

  if (button.classList.contains("grey")) {
    button.classList.remove("grey");
    button.classList.add("pink");
  } else {
    button.classList.remove("pink");
    button.classList.add("grey");
  }
}

And because :hover has greater specificity than plain pink or grey class, it will trigger your hover styles.