div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

<div class="btn_demo">
	<div class="text">体験</div>
	<div class="arrow">»</div>
</div>

@keyframes 矢印移動 {
   /* 開始状態 */
    0% {
        左: 130px;
    }
	/* 終了ステータス */
    100% {
        左: 140px;
    }
}
@keyframes color_move {
    /* 開始状態 */
    0% {
        background-position: 0% 0%; /* 水平位置 垂直位置 */
    }
    50% {
        背景位置: 50% 0%;
    }
	/* 終了ステータス */
    100% {
        背景位置: 100% 0%;
    }
}
.btn_demo {
    幅:180ピクセル;
    高さ:60px;
    境界線の半径: 10px;
    位置: 相対的;
    背景: 線形グラデーション(90度、#373d42 0%、#2679dd 50%、#373d42 100%);
    背景サイズ: 400% 100%;
    アニメーション: color_move 5秒 無限イーズインアウト 交互に;
    カーソル: ポインタ;
}
.btn_demo:ホバー{
    背景: #2679dd;
}
.btn_demo:アクティブ{
    背景: #373d42;
}
.btn_demo > .text {
    /* 背景: 黄色; */
    幅: 50px;
    テキスト配置: 中央;
    位置: 絶対;
    左: 50%;
    上位: 50%;
    変換: translate(-50%,-50%);
    フォントサイズ: 20px;
    色: #fff;
    フォントの太さ: 太字;
}
.btn_demo > .arrow {
    /* 背景: 緑; */
    幅: 20px;
    テキスト配置: 中央;
    位置: 絶対;
    フォントサイズ: 30px;
    色: #fff;
    トップ: 46%
    変換: translateY(-50%);
    left: 130px; /* 130~150px移動 */
    /* アニメーションを呼び出す */
    アニメーション名: arrow_move;
    /* 間隔 */
    アニメーション期間: 1秒;
    /* 無限再生*/
    アニメーションの反復回数: 無限;
}