CSS : the center of the button stop the hover function - html

Question

I created a button but when I put the mouse on it, the hover effect collapse.
Can someone give me an advice/solution ?
/* spinner style */
.spinner {
position: relative;
width: 50px;
height: 50px;
}
.spinner:before,
.spinner:after {
content: "";
display: block;
position: absolute;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
.spinner-block {
border: 2px solid #ccc;
!important;
border-radius: 50px!important;
width: 91px;
height: 91px;
}
/* spinners styles */
#-webkit-keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes anti-rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes anti-rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.spinner.spinner-0:before {
display: none;
}
.spinner.spinner-0:after {
width: 15px;
height: 15px;
border-bottom-color: #cccccc;
border-right-color: #cccccc;
border-top-color: #cccccc;
border-left-color: #cccccc;
top: -14px;
left: 34px;
background-color: #cccccc;
}
/**vert**/
.spinner.spinner-2:before {
width: 65px;
height: 65px;
border-bottom-color: #00ff10;
border-right-color: #00ff10;
border-top-color: rgba(33, 33, 33, 0);
border-left-color: rgba(33, 33, 33, 0);
top: 9px;
left: 10px;
-webkit-animation: anti-rotate-animation 0s linear 0s infinite;
animation: anti-rotate-animation 0s linear 0s infinite;
}
/**jaune**/
.spinner.spinner-2:after {
width: 40px;
height: 40px;
border-bottom-color: #dafc29;
border-right-color: #dafc29;
border-top-color: rgba(33, 33, 33, 0);
border-left-color: rgba(33, 33, 33, 0);
top: 22px;
left: 22px;
-webkit-animation: rotate-animation 0s linear 0s infinite;
animation: rotate-animation 0s linear 0s infinite;
}
* {
box-sizing: border-box;
}
.spinners {
width: 92px;
height: 92px;
transition: transform .8s!important;
}
/**HOVER**/
/**vert**/
.spinner.spinner-2:hover::before {
kit-animation: anti-rotate-animation 2.85s linear 0s infinite;
animation: anti-rotate-animation 2.85s linear 0s infinite;
}
/**jaune**/
.spinner.spinner-2:hover::after {
-webkit-animation: rotate-animation 1s linear 0s infinite;
animation: rotate-animation 1s linear 0s infinite;
}
<a href="/our-clean-technology/">
<div class="spinners">
<div class="spinner-block">
<div class="spinner spinner-2"></div>
<div class="spinner spinner-0"></div>
</div>
</div>
</a>

Answer 1

change css like this
.spinners:hover .spinner-2::before {
kit-animation: anti-rotate-animation 2.85s linear 0s infinite;
animation: anti-rotate-animation 2.85s linear 0s infinite;
}
.spinners:hover .spinner-2::after {
-webkit-animation: rotate-animation 1s linear 0s infinite;
animation: rotate-animation 1s linear 0s infinite;
}
updated pen is here