Demo of animation to change bottom border color using JQuery

CSS

<style>
#c1 {
color: #fff;
background-color: #000;
font-size: 20px;
padding: 1em;
text-align: center;
width: 280px;
height: 180px;
border-style: solid;
border-width: 1px;
  }
</style>

HTML

<div id="c1">Change this font  color by clicking the button</div>
<br><br>
<button id="b1">Change Color</button><button id="b2">Change again</button>

JQUERY

<script>
$(document).ready(function() {
$( "#b1" ).click(function() {
$( "#c1" ).animate({ color: "rgb( 250, 20, 120 )"},'slow');
});
////////////
$( "#b2" ).click(function() {
$( "#c1" ).animate({ color: "rgb( 150, 10, 160 )"},'slow');
});

})
</script>