css - Hover按钮边框动画特效

<div class="plug-info">
    <div class="box"></div>
</div>

css:
.plug-info {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #777;
}
.plug-info .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1aab8a;
}
.plug-info .box:before ,
.plug-info .box:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    opacity: 0;
}
.plug-info .box:before {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #fff;
    -webkit-transform: scale(1,0);
      -o-transform: scale(1,0);
       transform: scale(1,0);
}
.plug-info .box:after {
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: #fff;
    -webkit-transform: scale(0,1);
      -o-transform: scale(0,1);
       transform: scale(0,1);
}
// hover交互
.plug-info .box:hover:before ,
.plug-info .box:hover:after {
    opacity: 1;
    cursor: pointer;
    transition:.6s ease all;
    -webkit-transform: scale(1,1);
       -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
         -o-transform: scale(1,1);
            transform: scale(1,1);
}

效果图：

一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一