如何从btn-primary变为btn-success的颜色按钮？

问题是按钮的颜色从btn-primary类变为btn-success 。这要求我们添加过渡以及添加btn-success类。

方法：

• 首先，在@keyframes的帮助下添加过渡，以对btn-success类使用以下语法将背景颜色从蓝色缓慢更改为绿色：

  @keyframes animation-name {keyframes-selector {css-styles;}}

• 其次，我们必须使用以下方法将更改类定位到添加点击事件：

  // To target the elements having class change
  $(".change")                      
  // To add click event to elements having class change
  $(".change").click(function(){}) 
  

• 最后，要更改添加和删除类，我们分别使用以下方法button.addClass(“ btn-success”) ， button.removeClass(“ btn-primary”) 。

下面的示例说明了该方法：
例子：

    
        
        
        
        
        
        
        
        
        
            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;
            }
        
    
    
        GeeksforGeeks
        
             fade in color button from
             btn-primary to btn-success
        
        
            Click
        
        
            $(".change").click(function (e) {
                var button = $(".change");
                button.addClass("btn-success");
                button.removeClass("btn-primary");
            });
        
    

输出：