after the clicking the button background button color should be changed

[chandan86patra]

Hi All,

Can you guide me on how to change the background color of button after  clicking? can you give me the code.

<div class="widget-container">

    <button id="myButton" class="btn btn-success">Click Me!</button>

    <p id="message" class="hidden">Button clicked!</p>

</div>

Thanks ,

Chandan

[Bhavya11 · Accepted solution]

Hi @chandan86patra ,

can you try something like below

html

<button ng-click="onClick()" ng-class="{'clicked-button': buttonClicked}">
    Click Me
</button>

Client Controller :

api.controller=function($scope) {
  /* widget controller */
  var c = this;

 
    $scope.buttonClicked = false;

    // Function to handle button click
    $scope.onClick = function() {
        // Toggle the clicked state
        $scope.buttonClicked = !$scope.buttonClicked;
    };


};

css

button {
    background-color: #4CAF50; /* Default background color */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049; /* Background color on hover */
}

.clicked-button {
    background-color: #FF5733 !important; /* New background color when clicked */
}

before click :

after click

Please mark helpful & correct answer if it's really worthy for you.

Thanks,

BK