How to have a color change animation on a button outline?
<p>trying to recreate the button outline effect on the <a href="https://daneden.github.io/animate.css/" rel="nofollow noreferrer">https://daneden.github.io/animate.css/</a> . 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.</p>

<p>My attempt:
<a href="http://codepen.io/Dingerzat/pen/pNNgZj" rel="nofollow noreferrer">http://codepen.io/Dingerzat/pen/pNNgZj</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> /* 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 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
&lt;button class="modal_button color"&gt;ddd&lt;/button&gt;</code></pre>
</div>
</div>
</p>