【WordPress】ヘッダーに追従型ボタンを設置する方法!!

/* マウスカーソルがのってない時のボタン */
.l-header__inner .wp-block-button__link,
.l-fixHeader__inner .wp-block-button__link{
    transition: background 1s; /* アニメーションの頻度（秒） */
	box-shadow: 0 4px 0 #3a0d08; /* ボタンの影の高さと色 */
}

/* マウスカーソルがのっている時のボタン */
.l-header__inner .wp-block-button__link:hover,
.l-fixHeader__inner .wp-block-button__link:hover
{
	  transform: translateY(4px); /* Y方向へボタンを移動 */
	  box-shadow: none; /* ボタンの影を非表示 */
}

@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.l-header__inner .wp-block-button__link,
.l-fixHeader__inner .wp-block-button__link{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}

.l-header__inner .wp-block-button__link::after,
.l-fixHeader__inner .wp-block-button__link::after{
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}