Scribd
Upload
32 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
32 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

<!

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="[Link]">
</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="[Link]"></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
[Link]('alertButton').addEventListener('click', function() {
alert("Hello, welcome to the website!");
});

// Change Background Color Button Functionality


[Link]('colorButton').addEventListener('click', function() {
// Generate a random color
const randomColor = `hsl(${[Link]() * 360}, 100%, 75%)`;
[Link] = randomColor;
});

// Navigate Button Functionality


[Link]('navigateButton').addEventListener('click', function() {
[Link] = "[Link]
});

You might also like