<div>
<button>Hello</button>
</div>

div {
  display: flex;
  margin: 50px;
  justify-content: center;
}

button {
  padding: 20px;
  font-size: 28px;
}

var button = document.querySelectorAll('button')

for(var i=0;i<button.length;i++){
  console.log(button[i])
  button[i].addEventListener('mouseover', function(e) {
  e =this  
       e.style.color = 'white'
       e.style.backgroundColor = "black"
  })
   button[i].addEventListener('mouseout', function(e) {
  e =this  
       e.style.color = 'black'
       e.style.backgroundColor = "white"
  })
}