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>

 

截图

posted @ 2020-09-01 10:30  酷酷的城池  阅读(214)  评论(0)  编辑  收藏  举报