沿對角線漸變並有個白光一直掃的按鈕

<div class="content-wrap">
        <div class="box">
            <div class="btn"></div>
        </div>
</div>

　　

.content-wrap{
        width: 100%;
        min-width: 1024px;
        height: 100%;
        padding: 0 2%;
        margin-top: 60px;
        background: #F8F8F9 !important;
        box-sizing: border-box;
        .box{
            height: 80vh;
            .btn{
                width: 200px;
                height: 60px;
                border: 1px solid #ccc;
                background: #007BFF; /* 主色調 */
                border-radius: 6px;
                line-height: 60px;
                text-align: center;
                font-size: 20px;
                color: #000;
                cursor: pointer;
                overflow: hidden;
                position: relative;
            }
            .btn::before{
                background:linear-gradient(45deg,red ,blue);
                content: "確 認";
                color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }
            .btn::after {
                content: "";
                position: absolute;
                top: -40%;
                left:-100%;
                width: 20%;
                height: 200%;
                transform: rotate(150deg);
                background: #fff; /* 白光 */
                opacity: 0.5;
                pointer-events: none;
                animation: scan 2s infinite; /* 動畫名稱 */
            }

            @keyframes scan {
                0% { left: -100%; }
                100% { left: 100%; }
            }
        }
}