<html>
<head>
<meta charset="UTF-8">
<title>O Botão Mágico!</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
transition: background-color 0.5s ease-in-out;
}
button {
padding: 20px 40px;
font-size: 24px;
cursor: pointer;
border: none;
border-radius: 10px;
background-color: #ff6347;
color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.1s ease-in-out;
}
button:active {
transform: translateY(2px);
}
</style>
</head>
<body>
<button id="botaoCor">Clique para Mudar a Cor!</button>
<script>
const cores = ['lightblue', 'lightgreen', 'pink', 'lightsalmon', 'lightgray', 'yellow'];
let indiceCorAtual = 0;
const botao = document.getElementById('botaoCor');
const corpoDaPagina = document.body;
function mudarCorDoFundo() {
indiceCorAtual++;
if (indiceCorAtual >= cores.length) {
indiceCorAtual = 0;
}
corpoDaPagina.style.backgroundColor = cores[indiceCorAtual];
}
botao.addEventListener('click', mudarCorDoFundo);
</script>
</body>
</html>
0 comentários:
Postar um comentário