title: CSS : the center of the button stop the hover function
body: <p>I created a button but when I put the mouse on it, the hover effect collapse.
  Can someone give me an advice/solution ?</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>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="/our-clean-technology/"&gt;
    &lt;div class="spinners"&gt;
  
      &lt;div class="spinner-block"&gt;
        &lt;div class="spinner spinner-2"&gt;&lt;/div&gt;
        &lt;div class="spinner spinner-0"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>