« CSS Эффект вращение кнопки при наведение на неё »

<div class="munilearn-someon-cating">  
Средний, радиус границы, где фон 45 градусов  
<div class="vedugen">  
  <button class="spgekol-asenacm">JQUERY  
</button>  
  <div class="cumisconcep kepanoncecved"></div>  
  </div>  

Быстрый, радиус границы, где вертикальный фон  
  <div class="vedugen">  
  <button class="spgekol-asenacm fast">CSS</button>  
  <div class="cumisconcep kepanoncecved second"></div>  
  </div>  

Быстрее, без границ, где радиус 45 градусов  
<div class="vedugen">  
  <button class="spgekol-asenacm faster">HTML</button>  
  <div class="cumisconcep kepanoncecved third"></div>  
  </div>  
</div>

/* CSS Эффект вращение кнопки при наведение на неё */
.munilearn-someon-cating{  
  padding: 90px 80px;  
  background-color: #fff6ea;  
  box-shadow: 0 0 7px 3px #393939;  
  margin: auto;  
  text-align: center;  
}  

.vedugen{  
  position: relative;  
  width: 80px;  
  height: 80px;  
  margin: 15px auto 28px auto;  
margin-bottom: 0;  
  }  

.spgekol-asenacm{  
  background-color: #fff6ea;  
  outline: none;  
  font-weight: 600;  
  position:absolute;  
  cursor: pointer;  
  padding: 0;  
  border: none;  
  height: 64px;  
  width: 64px;  
  left: 8px;  
  top: 8px;  
  border-radius: 100px;  
  z-index: 2;  
}  

.spgekol-asenacm:active{  
  transform: translate(0, 1px);  
  height: 63px;  
  box-shadow: 0px 1px 0 0 rgb(189, 184, 184) inset;  
}  

.cumisconcep{  
  position: relative;  
  border-radius:40px;  
  width: 80px;  
  height: 80px;  
  z-index: 1;  
}  

.cumisconcep.third{  
  border-radius: 0;  
}  

.spgekol-asenacm.faster:hover + .cumisconcep, .spgekol-asenacm.faster:active + .cumisconcep {  
  animation: rotator linear .4s infinite;  
}  

.spgekol-asenacm.fast:hover + .cumisconcep, .spgekol-asenacm.fast:active + .cumisconcep {  
  animation: rotator linear .5s infinite;  
}  

.spgekol-asenacm:hover + .cumisconcep, .spgekol-asenacm:active + .cumisconcep {  
  animation: rotator linear .8s infinite;  
}  

@keyframes rotator{  
  from{ transform: rotate(0deg); }  
  to{ transform: rotate(360deg); }  
}  

   
.kepanoncecved {  
  background-image: linear-gradient(45deg,  
  #fff6ea 0%,  
  #fff6ea 30%,  
  rgb(3, 0, 187) 30%,  
  rgb(125, 228, 255) 70%,  
  #fff6ea 70%,  
  #fff6ea 100%);  
  }  

.kepanoncecved.second{  
  background-image: linear-gradient(  
  #fff6ea 0%,  
  #fff6ea 30%,  
  rgb(179, 74, 0) 30%,  
  rgb(251, 173, 118) 70%,  
  #fff6ea 70%,  
  #fff6ea 100%);  
}  

.kepanoncecved.third{  
  background-image: linear-gradient(45deg,  
  #fff6ea 0%,  
  #fff6ea 30%,  
  rgb(0, 62, 8) 30%,  
  rgb(130, 249, 145) 70%,  
  #fff6ea 70%,  
  #fff6ea 100%);  
}
/* uFive.Ru */