Open In App

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:

Below example illustrate the approach:
Example:




<!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>

Output:


Article Tags :