Unwanted box appearing around text in chrome but not other browsers - html

Question

The code I use for my color changing header text (I also use this same code for my color changing button) creates an unwanted outline around the text in Chrome, but in other browsers (IE, Edge, Firefox) only the text appears (which is as intended).
I believe it might be because I am using the same code for the button as well as the header. But if that is the case, then I am not sure what is causing the code to behave differently in Chrome but okay in other browsers.
The site is uploaded here:
http://www.maximiles.co.uk/images/dynamics/uk/bilendiloyalty3/index.html
My codepen is here:
http://codepen.io/Dingerzat/pen/BQZGLe
The code for the color change:
<!-- html -->
<h2 class="color_button">We enhance brand loyalty</h2>
.
/* CSS */
.enquire_button {
min-height: 2em;
width: 7em;
background-color: white;
border: 4px solid #f35626;
border-radius: 5px;
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_button {
animation-name: color_change;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#-webkit-keyframes color_change {
0% { color: #da6e16; border: 4px solid #da6e16; }
25% { color: #82da16; border: 4px solid #82da16; }
50% { color: #16dad0; border: 4px solid #16dad0; }
75% { color: #d41a82; border: 4px solid #d41a82; }
100% { color: #d41a82; border: 4px solid #d41a82; }
}
#-moz-keyframes color_change {
0% { color: #da6e16; border: 4px solid #da6e16; }
25% { color: #82da16; border: 4px solid #82da16; }
50% { color: #16dad0; border: 4px solid #16dad0; }
75% { color: #d41a82; border: 4px solid #d41a82; }
100% { color: #d41a82; border: 4px solid #d41a82; }
}
#-ms-keyframes color_change {
0% { color: #da6e16; border: 4px solid #da6e16; }
25% { color: #82da16; border: 4px solid #82da16; }
50% { color: #16dad0; border: 4px solid #16dad0; }
75% { color: #d41a82; border: 4px solid #d41a82; }
100% { color: #d41a82; border: 4px solid #d41a82; }
}
#-o-keyframes color_change {
0% { color: #da6e16; border: 4px solid #da6e16; }
25% { color: #82da16; border: 4px solid #82da16; }
50% { color: #16dad0; border: 4px solid #16dad0; }
75% { color: #d41a82; border: 4px solid #d41a82; }
100% { color: #d41a82; border: 4px solid #d41a82; }
}
#keyframes color_change {
0% { color: #da6e16; border: 4px solid #da6e16; }
25% { color: #82da16; border: 4px solid #82da16; }
50% { color: #16dad0; border: 4px solid #16dad0; }
75% { color: #d41a82; border: 4px solid #d41a82; }
100% { color: #d41a82; border: 4px solid #d41a82; }
}

Answer 1

Add border to .color_button class
.color_button
{
border:solid;

Answer 2

In your keyframes, only declare the border-color and not the entire border style. Then, in any other element which uses that same keyframes and needs a border, make sure the original element has the border style with the proper width.
#keyframes color_change {
0% { color: #da6e16; border-color:#da6e16; }
25% { color: #82da16; border-color:#82da16; }
50% { color: #16dad0; border-color:#16dad0; }
75% { color: #d41a82; border-color:#d41a82; }
100% { color: #d41a82; border-color:#d41a82; }
}
(plus of course the same change in all the vendor prefixed styles.)