CSS之实现按钮hover时边框动态效果

2019-11-10_13-25-16.gif

在看书时，突然想到怎样来实现这样的一个效果，记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。
实现也很简单，主要就是用一个包含元素包含四个div和一个button元素，包含元素和button元素相同的宽高，另外四个div进行绝对定位。

 <div id="buttonTry">
        <div id="left"></div>
        <div id="top"></div>
        <div id="right"></div>
        <div id="bottom"></div>
        <button id="btn">DELETE</button>
    </div>

 #buttonTry {
            width: 80px;
            height: 20px;
            border: none;
            position: relative;
        }
        #btn {
            display: block;
            width: 80px;
            height: 20px;
            outline: none;
            border: none;
        }
        #left,
        #right {
            position: absolute;
            top: -2px;
            left: -2px;
            height: 0px;
            width: 1px;
            border-left: 1px solid;
            border-color: red;
            transition: all .4s;
        }
        #right {
            left: 82px;
        }
        #top,
        #bottom {
            position: absolute;
            left: -2px;
            top: -2px;
            height: 1px;
            width: 0px;
            border-top: 1px solid;
            border-color: orange;
            transition: all .4s;
        }
        #bottom {
            top: 22px;
        }
        #buttonTry:hover #left {
            height: 24px;
        }
        #buttonTry:hover #right {
            height: 24px;
        }
        #buttonTry:hover #top {
            width: 84px;
        }
        #buttonTry:hover #bottom {
            width: 84px;
        }