周りを小さい丸がグルグル回るボタン

html

<div class="circle">
  <div class="circle2"></div>
  <div class="circle3"></div>
  <a href="#">A</a>
 </div>

css

.circle{
  margin:100px auto;
  cursor: pointer;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:#000099;
  text-align: center;
  transition: 10s;
  -webkit-transition: 10s;
}

.circle a{
  font-size: 20px;
  line-height: 54px;
  color:#fff;
  text-decoration: none;
  text-transform: uppercase;
}



.circle2{
  position: absolute;
  top:14px;
  left:-34px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:#000099;
  transition: 10s;
  -webkit-transition: 10s;
}



.circle3{
  position: absolute;
  top:14px;
  left:64px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:#000099;
  transition: 10s;
  -webkit-transition: 10s;
}

.circle:hover{
  transform: rotate(7200deg);
  -webkit-transform: rotate(7200deg);
  background:#00ffff;
}

.circle:hover > .circle2{
  background:#00ffff;
}
.circle:hover > .circle3{
  background:#00ffff;
}