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