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