Write an ASP.Net program that displays a button in green color and it should change to yellow when the mouse moves over it.

Answer:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ButtonColorChangeExample.Default" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title>Button Color Change on Hover</title>
    <style>
        /* Initial Button Style - Green */
        .btnGreen {
            background-color: green;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function changeColorOnHover(button) {
            button.style.backgroundColor = 'yellow'; // Change to yellow when mouse hovers
        }

        function resetColor(button) {
            button.style.backgroundColor = 'green'; // Change back to green when mouse moves out
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h2>Button Color Change Example</h2>
        <asp:Button ID="btnColorChange" runat="server" Text="Hover Over Me" 
                    CssClass="btnGreen" 
                    OnClientMouseOver="changeColorOnHover(this);" 
                    OnClientMouseOut="resetColor(this);" />
    </form>
</body>
</html>

Related Posts