SOURCE

console 命令行工具 X clear

                    
>
console
<div class="custom-Button-01">custom-Button-01</div>
<div class="custom-Button-02">custom-Button-02</div>
<div class="custom-Button-03">custom-Button-03</div>
        /* 下划线动画按钮 */
        
        body .custom-Button-01 {
            position: relative;
            display: inline-block;
            margin-bottom: -10px;
            padding-bottom: -10px;
        }
        
        body .custom-Button-01::before,
        body .custom-Button-01::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            height: 3px;
            border-radius: 3px;
            background-color: currentColor;
        }
        
        body .custom-Button-01::before {
            width: 0;
            color: red;
            transition: width 0s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0.3s;
        }
        
        body .custom-Button-01::after {
            width: 100%;
            color: #071e22;
            transition: width 0.3s cubic-bezier(0.420, 0.000, 1.000, 1.000);
        }
        
        body .custom-Button-01:hover::before {
            width: 100%;
            transition: width 0.3s cubic-bezier(0.420, 0.000, 1.000, 1.000);
            z-index: 1;
        }
        
        body .custom-Button-01:hover::after {
            width: 0;
            transition: width 0s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0.3s;
            z-index: 0;
        }
        /* End: 下划线动画按钮 */
        /* 渐变按钮 */
        
        body .custom-Button-02 {
            --color1: #314755;
            --color2: #26a0da;
        }
        
        body .custom-Button-02 {
            display: block;
            padding: 15px 45px;
            color: #fff;
            background-image: linear-gradient(to right, var(--color1) 0%, var(--color2) 51%, var(--color1) 100%);
            background-size: 200% auto;
            border-radius: 10px;
            box-shadow: 0 0 20px #eee;
            text-align: center;
            text-transform: uppercase;
            transition: .5s;
        }
        
        body .custom-Button-02:hover {
            color: #fff;
            background-position: right center;
            text-decoration: none;
        }
        /* End: 渐变按钮 */
        /* 旋转按钮 */
        
        body .custom-Button-03 {
            position: fixed;
            top: 50%;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: auto;
            padding: 30px 20px;
            color: #fff !important;
            font-size: 20px;
            line-height: 1;
            font-weight: 500;
            background-color: var(--accent-color4);
            border-radius: 0px 8px 8px 0px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
            writing-mode: tb-rl;
            transform: rotateX(180deg) rotateY(-180deg) translateX(0px);
            transition: color ease-in 300ms, background-color ease-in 300ms;
        }
        
        body .custom-Button-03:hover {
            background-color: var(--accent-color);
        }
        /* End: 旋转按钮 */