How to have a color change animation on a button outline?

trying to recreate the button outline effect on the https://daneden.github.io/animate.css/ . I tried looking over the code and could not figure out what was triggering what, so I created a color changing effect from some tutorials and then ripped the css of the button styling from the animate.css page and merged them together. The color animation has been applied to the button, but what I cannot seem to work out is how you then apply that color animation to only the outline and the inside text. I also am wondering how I made can make the color changing more gradual as even after increasing the animation duration it still feels too sudden.

My attempt: http://codepen.io/Dingerzat/pen/pNNgZj

 /* CSS */

.modal__button {
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  background-color: transparent;
  border: 2px solid #f35626;
  color: #f35626;
  cursor: pointer;
  font-size: 15px;
  outline: none;
  padding: 7px 22px;
  -webkit-transition: background-color .4s, color .4s;
  -o-transition: background-color .4s, color .4s;
  transition: background-color .4s, color .4s;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-moz-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-ms-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-o-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}

<!-- HTML -->
<button class="modal_button color">ddd</button>

Solution

Here's a version that changes text-color and border-color, instead of background.

/* CSS */
.modal_button {
  min-height: 2em;
  width: 5em;
  background-color: white;
  border: 2px solid #f35626;
  color: #f35626;
  cursor: pointer;
  font-size: 2em;
line-height: 2em;
  -webkit-transition: color .4s;
  -o-transition: color .4s;
  transition: color .4s;
    -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  text-align: center;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-moz-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-ms-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-o-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}

<button class="modal_button color">Button</button>