How to Add Hover Effect on a HTML Button using CSS Code

To add a hover effect on a button using CSS, you can define a hover state by using the :hover pseudo-class in your button's CSS rules. This allows you to change the button's appearance when the user hovers over it with their mouse.

Example:

<button class="hover-button">Hover Me!</button>

        <style>
            .button {
                background-color: blue;
                color: white;
                border: none;
                padding: 10px 20px;
                cursor: pointer; /* Change cursor to indicate clickable state */
                text-align: center; /* Center the text */
                display: inline-block; /* Allow padding to take effect */
                width: auto; /* Make the button width auto */
                transition: background-color 0.3s ease;
            }
    
            .hover-button:hover {
                background-color: darkblue; /* Change background color on hover */
            }
        </style>