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>

截图

查看全文

相关阅读:
javaweb(五)——Servlet开发(一)
JDK1.8改为JDK1.7过程
 javaweb(四)——Http协议(请求头,响应头详解)
JavaWeb(三)——Tomcat服务器(二)
JavaWeb(二)——Tomcat服务器(一)
JavaWeb——JavaWeb开发入门
 java学习之异常总结
 java学习之异常之覆盖
 java学习之异常之格式
 java学习之异常之finally

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