How to disable a button in CSS

We can disable a button with CSS by adding a "disabled-button" class to style it as disabled.

Example:

<button class="disabled-button" disabled>Disabled Button</button>

        <style>
            .disabled-button {
                background-color: lightgray;
                color: darkgray;
                border: none;
                padding: 10px 20px;
                cursor: not-allowed; /* Change cursor to indicate disabled 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;
            }
    
            .disabled-button:hover {
                background-color: lightgray; /* No change on hover for disabled button */
            }
        </style>