css 眼前一亮的hover

截图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>截图</title>
    <style>

    </style>
</head>
<style>
    button {
        border: 0;
        background: none;
        text-transform: uppercase;
        color: #4361ee;
        font-weight: bold;
        position: relative;
        outline: none;
        padding: 10px 20px;
        box-sizing: border-box;
    }



    button::before,
    button::after {
        box-sizing: inherit;
        position: absolute;
        content: '';
        border: 2px solid transparent;
        width: 0;
        height: 0;
    }

    /* button::after {
        bottom: 0;
        right: 0;
    } */

    button::before,
    button::after {
        top: 0;
        left: 0;
    }

    button:hover::before,
    button:hover::after {
        width: 100%;
        height: 100%;
    }

    button:hover::before {
        border-top-color: #4361ee;
        border-right-color: #4361ee;
        transition: width 0.3s, height 0.3s ease-out 0.3s;
    }

    button:hover::after {
        border-bottom-color: #4361ee;
        border-left-color: #4361ee;
        transition: height 0.3s, width 0.3s ease-out 0.3s;
    }
</style>

<body>
    <div id="draw-border">
        <button>Hover me</button>
    </div>
</body>

</html>

截图

相关阅读:
Found class xxx.xxx.xxx, but interface was expected
String的length()和getBytes().length
springboot shutdown（停机）
关于Java代码简化的小技巧
数据库的简单查询
数据库TSQL语句
环境搭建及wamp空密码修改
js windows对象
JS函数的其他用法【备于取用】
js递归

原文地址：https://www.cnblogs.com/chengfengchi/p/13594737.html