Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
6 views2 pages

Colr Efect in HTML in

The document is an HTML webpage featuring a 'Magic Color Button' that changes color when clicked. It includes CSS for styling the layout and JavaScript to generate a random hex color for both the button and the body background. The design is centered and responsive, providing a visually appealing user experience.

Uploaded by

dikizatadiwanashe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views2 pages

Colr Efect in HTML in

The document is an HTML webpage featuring a 'Magic Color Button' that changes color when clicked. It includes CSS for styling the layout and JavaScript to generate a random hex color for both the button and the body background. The design is centered and responsive, providing a visually appealing user experience.

Uploaded by

dikizatadiwanashe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic Color Button</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
transition: background-color 0.5s ease-in-out; /* Smooth transition for
background */
}
.container {
text-align: center;
padding: 2rem;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
color: #666;
font-size: 1.2rem;
margin-bottom: 2rem;
}
button {
padding: 1rem 2rem;
font-size: 1.2rem;
font-weight: bold;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 50px;
cursor: pointer;
outline: none;
transition: background-color 0.3s ease; /* Smooth transition for button
color */
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>

<div class="container">
<h1>The Magic Color Button</h1>
<p>Click the button below and watch it change color!</p>
<button id="colorButton">Click Me!</button>
</div>

<script>
const colorButton = document.getElementById('colorButton');
const body = document.body;

// Function to generate a random hex color


function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

// Add a click event listener to the button


colorButton.addEventListener('click', () => {
const randomColor = getRandomColor();
colorButton.style.backgroundColor = randomColor; // Change button color
body.style.backgroundColor = randomColor; // Change body background color
});
</script>

</body>
</html>

You might also like