Page 286 - Web Applications (803) Class 12
P. 286
Output:
18. Create a webpage with a transition effect.
Ans. <html>
<head>
<title>Transition on Button Click</title>
<style>
/* Define the button style */
.my-button {
padding: 10px 20px;
background-color: red;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
</style>
</head>
<body>
<h1>Click on the button to change its colour</h1>
<button class=”my-button” id=”transitionButton” onclick=”this.style.
backgroundColor=’blue’”>Click Here</button>
</body>
</html>
284 Touchpad Web Applications-XII

