<html>
<head>
<title>Change Background</title>
<style type="text/css">
.btn{
background-color: blue;
}
.btn button{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
border: none;
padding:25px;
border:solid 2px #000;
border-radius: 20px;
outline: none;
}
</style>
<script type="text/javascript">
function change(){
var myArray = ['red', 'orange', 'blue','green','cian','yellow','black','gold','hotpink'];
rand = myArray[Math.floor(Math.random()*myArray.length)];
document.getElementById('btn2').style.color = rand;
document.getElementById('btn2').style.borderColor = rand;
}
</script>
</head>
<body background="blue">
<div class="btn" id="btn" background="blue">
<button id="btn2" onclick="change()">Click Me!</button>
</div>
</body>
</html>