Как сделать анимацию изменения цвета на контуре кнопки? ⇐ CSS

[Anonymous]

пытаюсь воссоздать эффект контура кнопки на https://daneden.github.io/animate.css/. Я попытался просмотреть код и не смог понять, что именно вызывает, поэтому я создал эффект изменения цвета из некоторых руководств, а затем скопировал CSS стиля кнопки со страницы animate.css и объединил их вместе. Цветная анимация была применена к кнопке, но я не могу понять, как затем применить эту цветовую анимацию только к контуру и внутреннему тексту. Мне также интересно, как я сделал изменение цвета более постепенным, поскольку даже после увеличения продолжительности анимации оно все равно кажется слишком внезапным.

Моя попытка:
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 }
}

Код: Выделить всё

ddd

Подробнее здесь: https://stackoverflow.com/questions/406 ... on-outline