Respuesta
Claro, aquí tienes un ejemplo sencillo de una página web que muestra un botón en el centro de la pantalla. Al hacer clic en el botón, cambiará de color aleatoriamente. Utilizaremos HTML, CSS y JavaScript para lograr esto.
xml
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón de Color Aleatorio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button id="colorButton">Cambia mi color</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
button {
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
javascript
document.getElementById('colorButton').addEventListener('click', function() {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
this.style.backgroundColor = randomColor;
});
HTML: Define la estructura básica de la página, incluyendo un botón dentro de un contenedor centrado.
CSS: Estiliza el botón y centra el contenido en la página. El botón tiene un efecto de transición suave cuando cambia de color.
JavaScript: Añade un evento de clic al botón. Cuando se hace clic, se genera un color hexadecimal aleatorio y se aplica como fondo del botón.
Este código es un buen punto de partida para crear una página web interactiva. Puedes expandirlo y personalizarlo según tus necesidades.