CSS : the center of the button stop the hover function

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