在css镀铬边框半径之前 - 裁剪bug

Question

我在chrome方面遇到了问题。我在我的班级.button设置了一个before语句，以便在悬停时制作动画，但::before的结尾是裁剪：

http://i.stack.imgur.com/s558b.gif

代码来源：

＆＃13;

＆＃13;

body {
  background:#000;  
}

.button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 12px 24px 14px 24px;
  box-shadow:inset 0 0 0 2px #0282d1;
  border-radius: 999px;
  overflow: hidden;
  z-index: 10;
}

button {
  border:0; 
  background:none;
  color:#fff;
}

button::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  right: 100%;
  margin: -15px 0 0 1px;
  width: 30px;
  height: 30px;
  background: linear-gradient(to right, #02AFF1, #0057A3);
  transform-origin: 0 50%;
  transform: scale3d(1, 2, 1);
  transition: transform 300ms ease-in, opacity 300ms ease-in;
  border-radius: 999px;
  vertical-align: middle;
}
.button:hover::before {
  transform: scale3d(9, 9, 1);
}

＆＃13;

<button class="button">ACCUEIL</button>

＆＃13;

＆＃13;

＆＃13;

我无法在谷歌上找到解决方案。 它适用于safari＆amp;火狐。

感谢。