<body id="body">
<button id="aqua" onclick="myColor()"> Find an aqua
  </button>
</body>
body {
  background: rgb(50, 50, 50);
}

button , a {
background: black;
  box-shadow: 0 15px gray; 
  height: 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
  outline: none;
 position: absolute;
  cursor: pointer;
  border: none;
  top: 50%;
  left: 50%;
  text-decoration: none;
  height: 80px;
  width: 300px;
  transform: translate(-50%, -50%);
  font-family: "jokerman", cursive, sans-serif;
  transition-duration: 0.3s;
  font-size: 30px;
  user-select: none;  
}

button:active {
  box-shadow: 0px 3px gray;
  top: 52%;
}

@keyframes mon {
  from{background: black;
  color: white;}
  to{background:white;
  color: black;
  }
}

button:hover {
  animation: mon infinite alternate 3s;
}
function myColor() {
  var v = Math.floor(Math.random() * 500);

  if (v >10) {
document.getElementById("body").style.background = "chocolate";
    document.getElementById("aqua").innerHTML = "I'\m chocolate"
  } else if (v==0) {
document.getElementById("body").style.background = "aqua";
    document.getElementById("aqua").innerHTML = "I'\M AQUA"
  }
  else if(v==2) {
document.getElementById("body").style.background = "pink"; document.getElementById("aqua").innerHTML = "I'\m pink"
  }
    else if(v==1) {
document.getElementById("body").style.background = "red"; document.getElementById("aqua").innerHTML = "I'\m red"
  }
    else if(v==3) {
document.getElementById("body").style.background = "blue"; document.getElementById("aqua").innerHTML = "I'\m blue"
  }
    else if(v==4) {
document.getElementById("body").style.background = "orange"; document.getElementById("aqua").innerHTML = "I'\m orange"
  }
    else if(v==5) {
document.getElementById("body").style.background = "yellow"; document.getElementById("aqua").innerHTML = "I'\m yellow"
  }
     else if(v==6) {
document.getElementById("body").style.background = "purple"; document.getElementById("aqua").innerHTML = "I'\m purple"
  }
     else if(v==7) {
document.getElementById("body").style.background = "green"; document.getElementById("aqua").innerHTML = "I'\m green"
  }
     else if(v==8) {
document.getElementById("body").style.background = "brown"; document.getElementById("aqua").innerHTML = "I'\m brown"
  }
     else if(v==9) {
document.getElementById("body").style.background = "silver"; document.getElementById("aqua").innerHTML = "I'\m silver"
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.