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

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

在看书时，突然想到怎样来实现这样的一个效果，记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。

实现也很简单，主要就是用一个包含元素包含四个div和一个button元素，包含元素和button元素相同的宽高，另外四个div进行绝对定位。

DELETE

#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;

}