¿Cómo desvanecerse en el botón de color de btn-primary a btn-success?

El problema es atenuar el color del botón de btn-primary class a btn-success . Esto requiere que agreguemos transiciones, así como la clase btn-success .

Acercarse:

  • En primer lugar, agregue una transición con la ayuda de @keyframes para cambiar lentamente el color de fondo de azul a verde usando la siguiente sintaxis para la clase btn-success:
    @keyframes animation-name {keyframes-selector {css-styles;}}
  • En segundo lugar, tenemos que apuntar a la clase de cambio a un evento de clic adicional usando:
    // To target the elements having class change
    $(".change")                      
    // To add click event to elements having class change
    $(".change").click(function(){}) 
    
  • Finalmente, para cambiar la clase de agregar y eliminar, usamos los siguientes métodos button.addClass («btn-success») , button.removeClass («btn-primary») respectivamente.

El siguiente ejemplo ilustra el enfoque:
Ejemplo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
crossorigin="anonymous" />
        <script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js" 
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
        </script>
        <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
crossorigin="anonymous">
        </script>
        <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
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>

Producción:

Publicación traducida automáticamente

Artículo escrito por shivanshsaxena1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *