ボタンホバー「中央から円が広がる」

※よく見ると広がる円がボタン端までギリギリ届いてないので改良の余地あるかも…？（IEでは顕著にみえる

.circleScaleBtn {
  padding: 12px 24px;
  background-color: hsl(222, 100%, 95%);
  color: hsl(243, 80%, 62%);
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
}


.circleScaleBtn span {
  z-index: 1;
  position: relative;
}


.circleScaleBtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: opacity .4s cubic-bezier(.19, 1, .22, 1), transform .75s cubic-bezier(.19, 1, .22, 1);
  background-color: hsl(243, 80%, 62%);
  opacity: 0;
}


.circleScaleBtn:hover span {
  color: hsl(222, 100%, 95%);
}


.circleScaleBtn:hover::before {
  opacity: 1;
  transition-duration: .85s;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
}