Scribd
Upload
20 views2 pages

Buttons HTML

The document is an HTML webpage that includes a header and three interactive buttons: one for displaying an alert, one for changing the background color, and one for navigating to Google. It contains CSS styles for layout and button design, as well as JavaScript functionality for the button actions. The overall design is simple and user-friendly, aimed at providing basic interactivity.

Uploaded by

Aarav Ryan
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
20 views2 pages

Buttons HTML

The document is an HTML webpage that includes a header and three interactive buttons: one for displaying an alert, one for changing the background color, and one for navigating to Google. It contains CSS styles for layout and button design, as well as JavaScript functionality for the button actions. The overall design is simple and user-friendly, aimed at providing basic interactivity.

Uploaded by

Aarav Ryan
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>Website with Buttons</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>

<div class="button-container">
<button id="alertButton">Click Me for Alert</button>
<button id="colorButton">Change Background Color</button>
<button id="navigateButton">Go to Google</button>
</div>

<script src="script.js"></script>
</body>
</html>
/* General body styles */
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
margin: 0;
}

/* Header style */
header h1 {
color: #333;
}

/* Button container */
.button-container {
margin-top: 30px;
}

/* Button styles */
button {
padding: 15px 30px;
margin: 10px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}

/* Button hover effects */


button:hover {
background-color: #ddd;
}

/* Specific button styles */


#alertButton {
background-color: #4CAF50;
color: white;
}

#colorButton {
background-color: #008CBA;
color: white;
}

#navigateButton {
background-color: #f44336;
color: white;
}
// Alert Button Functionality
document.getElementById('alertButton').addEventListener('click', function() {
alert("Hello, welcome to the website!");
});

// Change Background Color Button Functionality


document.getElementById('colorButton').addEventListener('click', function() {
// Generate a random color
const randomColor = `hsl(${Math.random() * 360}, 100%, 75%)`;
document.body.style.backgroundColor = randomColor;
});

// Navigate Button Functionality


document.getElementById('navigateButton').addEventListener('click', function() {
window.location.href = "https://www.google.com";
});

You might also like