CSS :hover selector not working on a button

body {
  margin: 0;
  background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #999;
}

html {
  width: 100%;
  height: 100%;
}

.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
  color: #66d8ed;
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}

<script defer src="script.js"></script><a class="fadebutton" href="www.google.com">Change color</a>