CSS组件之按钮（button）样式3

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - CSS组件之按钮（button）样式3</title>
    <style>
        body {
            background: #2f2f2f;
        }
        .button-wrapper {
            font-size: 10px;
            display: flex;
            padding: 20px;
        }
        .corner-button {
            font-family: 'Lato', sans-serif;
            letter-spacing: .02rem;
            cursor: pointer;
            background: transparent;
            border: 0.5rem solid currentColor;
            padding: 1.5rem 2rem;
            font-size: 2.2rem;
            color: #06c17f;
            position: relative;
            transition: color 0.3s;
        }
        .corner-button:hover {
            color: pink;
        }
        .corner-button:hover::before {
            width: 0;
        }
        .corner-button:hover::after {
            height: 0;
        }
        .corner-button:active {
            border-width: 0.25rem;
        }
        .corner-button span {
            position: relative;
            z-index: 2;
        }
        .corner-button::before, .corner-button::after {
            content: '';
            position: absolute;
            background: #2f2f2f;
            z-index: 1;
            transition: all 0.3s;
        }
        .corner-button::before {
            width: calc(100% - 3rem);
            height: calc(101% + 1rem);
            top: -0.5rem;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .corner-button::after {
            height: calc(100% - 3rem);
            width: calc(101% + 1rem);
            left: -0.5rem;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="button-wrapper">
    <button class="corner-button">
        <span>请点击</span>
    </button>
</div>
</body>
</html>