Skip to content
Related Articles

Related Articles

How to fade in color button from btn-primary to btn-success?
  • Last Updated : 05 Jun, 2020

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