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>

截图

相关阅读:
使用指针的误区之指针未初始化
实验室react项目名词解释
生活感悟之大学
git 快速入门
口才锻炼
narcissus
crest value &minimum
factorial
Str_turn
array_x

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