[SCSS] 마우스 오버 시 채워지는 테두리 애니메이션 효과

.hoverBtn {
      $borderWid: 2px;
      $btnBakColor: #23193b;

      position: relative;
      overflow: hidden;      
      background-color: $btnBakColor;

      &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-width: $borderWid;
            border-style: solid;
            border-color: white;
            box-sizing: border-box;
      }

      &:after {
            content: "";
            position: absolute;
            top: calc(-1 * #{$borderWid});
            left: calc(-1 * #{$borderWid});
            bottom: calc(-1 * #{$borderWid});
            right: calc(-1 * #{$borderWid});
            display: inline-block;
            background: radial-gradient(transparent 60%, $btnBakColor 40%);
            clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
            transition: all .2s ease-in-out;
      }

      &:hover {
            &:after {
                  clip-path: polygon(90% 0, 100% 0, 100% 10%, 10% 100%, 0 100%, 0 90%);
            }
      }
}