How to fade in color button from btn-primary to btn-success?

The problem is fade the color of the button from btn-primary class to btn-success. This requires us to add transitions as well as add btn-success class.

Approach:

  • Firstly, add a transition with the help of @keyframes to slowly change the background color from blue to green using the following syntax to the btn-success class:
    @keyframes animation-name {keyframes-selector {css-styles;}}
  • Secondly, we have to target change class to a add click event using:
    // To target the elements having class change
    $(".change")                      
    // To add click event to elements having class change
    $(".change").click(function(){}) 
    
  • Finally, to change add and remove class we use the following methods button.addClass(“btn-success”), button.removeClass(“btn-primary”) respectively.

Below example illustrate the approach:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href=
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
crossorigin="anonymous" />
        <script src=
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
        </script>
        <script src=
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
crossorigin="anonymous">
        </script>
        <script src=
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
        </script>
        <style>
            body {
                text-align: center;
            }
            .btn.btn-success {
                transition-duration: 2s;
                animation-name: colorTransition;
            }
  
            @keyframes colorTransition {
                from {
                    background-color: #007bff;
                }
                to {
                    background-color: #32cd32;
                }
            }
              
            h1 {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <b>
             fade in color button from
             btn-primary to btn-success
        </b>
        <div class="cb">
            <a class="btn btn-primary change">Click</a>
        </div>
        <script type="text/javascript">
            $(".change").click(function (e) {
                var button = $(".change");
                button.addClass("btn-success");
                button.removeClass("btn-primary");
            });
        </script>
    </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Code_Mech