Пропадает border у кнопки?

У кнопки, при hover, пропадают границы. Пробовал задавать margin, padding, border transparent для родителя. Как исправить? https://jsfiddle.net/b2acnj70/5/

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

.button {
   width: 150px;
   height: 50px;
   position: relative;
   display: block;
   font-weight: 500;
   color: #fff;
   background-color: transparent;
   box-shadow: 0 4px 34px rgba(248, 147, 0, 0.34);
   border: 0;
   border-radius: 6px;
   z-index: 10;

   transition: color 0.3s;
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

   &::before,
   &::after {
      position: absolute;      
      display: block;
      content: '';
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      transition: transform 0.3s, opacity 0.3s;
      transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   }
   &::after {
      background-color: blue;
   }
   &::before {
      border: 1px solid blue;
      opacity: 0;
      transform: scale3d(1.1, 1.1, 1);
   }
   &:hover {
      color: blue;
   }
   &:hover::before {
      opacity: 1;
      transform: scale3d(1, 1, 1);
   }
   &:hover::after {
      opacity: 0;
      transform: scale3d(0.8, 0.8, 1);
   }
}