About Lesson
Hands-On Practice
Interactive Button
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling</title>
<style>
#button {
padding: 10px 20px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="button">Click Me</button>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$(this).text("Button Clicked!");
});
$("#button").hover(
function () {
$(this).css("background-color", "blue");
},
function () {
$(this).css("background-color", "green");
}
);
});
</script>
</body>
</html>