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:
- 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 = "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 >w3wiki</ 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:
Contact Us