炫彩漸層底圖效果-我是一個金艾吉

炫彩漸層底圖效果

按鈕底色為漸層並且有動態的效果

重點：

transform: skewY(-10deg); //Y軸傾斜
transform: skewY(10deg);
box-shadow: 0 30px 10px rgba(0, 0, 0, 0.1),
inset 0 0 20px rgba(0, 0, 0, 0.2); //內陰影

效果演示：

HTML：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>炫彩漸層互動按鈕</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200821">
    <a href="#">BUTTON</a>
</body>

</html>

CSS：

#dailycss_20200821 {
    background: #333;
}
#dailycss_20200821 a {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    text-decoration: none;
    color: #fff;
    transform: translate(-50%, -50%);
    transition: 0.5s all ease;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #03a9f4);
    background-size: 200%;
    border-radius: 0px;
    animation: animate 1s linear infinite;
    -webkit-animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 200%;
    }
}

來源：