20分で押せなくなるボタンを実装する例をご紹介いたします。

1. Widget 「サイトを開いたらカウントダウン開始※要javascript」を設置

2. 上記設置した Widget のJavaScriptを編集

下記 _.init = function() { … } 内に下記コードを追加してください。

_.init = function() {
    _.timer = [];
    let endTime = [];
    let endMinutes = 1;
    let endComment = '終了しました'
    endTime[0] = new Date().setMinutes(new Date().getMinutes() + endMinutes);
    _.timer[0] = new _.CountdownTimer(document.querySelector('.js-countdown-class-00'), endTime[0], {
        callback: function() {
            document.querySelector('.js-countdown-class-00 .end-text').innerHTML = endComment;
            document.querySelector('.js-countdown-class-00').classList.add('is-end');
            // ★ 追加ここから ↓↓
            if (document.querySelector('.end-btn')) {
                document.querySelector('.end-btn').classList.add('is-disabled');
            }
            // ★ 追加ここまで ↑↑
        }
    });
};

3. 設置しているボタンに クラス名を追加

時間制限をつけたいボタンにクラス名class=”end-btn”を追加します。

詳細：https://squadbeyond.gyazo.com/b2a5d4e1c9cd2e418686c52f09e489d3

<div class="button-box">
 　<a href="ooooo" class="end=btn" draggable="false">
    <div class="button style button-color-green"><span class="copy">お得なキャンペーン</span><span class="title">公式ページを見てみる</span></div>
</div>

4. 追加したクラスに ボタンを無効にするためのCSSを適応

詳細：https://squadbeyond.gyazo.com/2095f1a9a026ff4b2c3a2e8f03efe33c

.button-box a.is-disabled {
  pointer-events: none; //マウスカーソルのイベント（aタグのリンク）を無効にする
  filter: grayscale(1); //ボタンにグレーのフィルターを適応 ※グレーにしたくない場合は削除して下さい
}
.button-box a.is-disabled .style::before {
  animation: unset; //動く矢印を止める ※動かしたままで良い場合は削除して下さい
}

下記設置例：

https://sb-draft-preview.squadbeyond.com/articles/xknDzWLnFIQohjGfyqw/draft?token=b43b0c24031b36db9bba37c97fd999c8

※ 設置例はタイマーを 1分 に設定しています