CSSで実装したグリッチの揺れるエフェクトがかっこいい！映画で見かけるようなサイバーなUI -CyberPopover 2025

サイト構築 -制作

Post on:2025年7月28日

sponsorsr

まさにクール！映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。

下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあります。また、アクション時の音もかなりサイバーです。

グリッチの動作は、下記ページでお楽しみください。
ボタンをクリックしたときの電子音も心地よいです（特にProceed）。また、キーボード操作（U, Esc, Return）にも対応しています。

See the Pen
CyberPopover 2025 by coliss (@coliss)
on CodePen.

アクション時の音とキーボード操作はJavaScriptで実装されていますが、それ以外はHTML+CSSで実装されています。とはいっても、コードはかなり複雑です。たとえば、ボタンのHTMLだけでも下記の通りです。

    <button
      class="cyber-btn"
      popovertarget="upgrade"
      popovertargetaction="show"
      aria-label="Upgrade"
      data-action="Upgrade"
    >
      <span class="backdrop">
        <span class="corner"></span>
      </span>
      <kbd>U</kbd>
      <span>Upgrade</span>
      <div class="glitch" aria-hidden="true">
        <span class="backdrop">
          <span class="corner"></span>
        </span>
        <kbd>U</kbd>
        <span class="letters">
          <span>U</span>
          <span>p</span>
          <span>g</span>
          <span>r</span>
          <span>a</span>
          <span>d</span>
          <span>e</span>
        </span>
      </div>
    </button>

<button

class="cyber-btn"

popovertarget="upgrade"

popovertargetaction="show"

aria-label="Upgrade"

data-action="Upgrade"

Upgrade

U

p

g

r

a

d

e

</div>

</button>

グリッチのエフェクトは、下記のCSSで実装されています。

    &:is(:focus-visible, :hover) .glitch {
      animation: glitch 2s infinite;
      display: flex;

      .backdrop {
        background: canvas;
      }
    }

    .glitch {
      display: none;
      position: absolute;
      inset: 0;
      translate: 0% 0;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.5rem;
      pointer-events: none;
      color: var(--accent);
      text-shadow: 0 1px var(--shadow);

      kbd {
        opacity: 0;
      }
    }
  }