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
   281   282   283   284   285   286   287   288   289   290   291