CSSだけで作る、TikTokみたいなグリッチボタンアニメーション

ホバー

CSSだけで作る、TikTokみたいなグリッチボタンアニメーション

投稿日2026/03/16

更新日2026/3/15

シンプルなボタンでも、少しの演出を加えるだけで印象は大きく変わります。
今回紹介するのは、RGBの色ズレのようなグリッチ感を持つボタンアニメーションです。

疑似要素で作った2つのカラーレイヤーを少しずらして配置し、ホバー時にその位置を入れ替えることで、デジタルなノイズ感のあるUIを演出できます。さらに mix-blend-mode を使うことで、ネオンのような発光感も表現できます。

この記事では、CSSだけで作るグリッチ風ボタンの仕組みとカスタマイズ方法を解説します。

目次

  1. プレビュー
  2. コード
  3. 詳しい説明
  4. 関連記事

Preview プレビュー

Code コード 

<div id="kumonosu-wrapper" class="kumonosu-container">
	<button type="button" class="kumonosu-main-button">BUTTON</button>
</div>
:root {
	--kumonosu-color-1: #00feff;
	--kumonosu-color-2: #ff0100;
}
.kumonosu-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #111;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: sans-serif;
}
.kumonosu-main-button {
	position: relative;
	padding: 1rem 2rem;
	font-size: 1.5rem;
	border: none;
	outline: none;
	cursor: pointer;
	background: transparent;
	color: rgb(0, 0, 0);
	z-index: 1;
	transition: transform 0.1s;
}
.kumonosu-main-button::before,
.kumonosu-main-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0.5rem;
	z-index: -1;
	mix-blend-mode: plus-lighter;
	transition: transform 0.2s cubic-bezier(0.36, 0, 0.515, -1);
	pointer-events: none;
}
.kumonosu-main-button::before {
	background-color: var(--kumonosu-color-1);
	transform: translate(-0.2rem, -0.2rem);
}
.kumonosu-main-button::after {
	background-color: var(--kumonosu-color-2);
	transform: translate(0.2rem, 0.2rem);
}
.kumonosu-main-button:hover::before {
	transform: translate(0.2rem, 0.2rem);
}
.kumonosu-main-button:hover::after {
	transform: translate(-0.2rem, -0.2rem);
}
.kumonosu-main-button:active {
	transform: scale(0.95);
	filter: brightness(1.2);
}

Explanation 詳しい説明

仕様

このボタンは、疑似要素で2つのカラーレイヤーを作り、わずかに位置をずらして配置することでRGBズレのような演出を作っています。

ホバー時にはそれぞれのレイヤー位置を入れ替えることで、グリッチのような動きを表現しています。

主な仕組みは次の通りです。

・::before と ::after で2つの色レイヤーを作成
・translate でレイヤーを少しずらして配置
・hover 時に位置を入れ替えて動きを演出
・mix-blend-mode でネオン風の合成表現
・active 時に scale をかけて押し込み感を追加

ボタン本体は透明背景にして、背後のカラーレイヤーが視覚的なデザインとして機能する構造になっています。

カスタム

見た目の印象は、CSS変数や移動量を変更することで簡単に調整できます。

主なカスタマイズポイントは次の通りです。

・カラーは –kumonosu-color-1 と –kumonosu-color-2
・色のズレ量は translate の値
・ボタンサイズは padding
・角丸は border-radius
・ホバーの動きは transition の cubic-bezier
・押し込み感は scale の値

色をネオンカラーにするとサイバー感が強くなり、パステルカラーにするとポップなUIにも応用できます。

注意点

このボタンはシンプルな構造ですが、いくつか環境依存のポイントがあります。

注意点は次の通りです。

・mix-blend-mode は背景色の影響を受ける
・暗い背景でないと発光感が弱くなる
・古いブラウザではブレンド表現が変わる可能性がある
・疑似要素を使うため overflow 制御に注意

実際のUIで使う場合は、背景カラーとの相性を確認して調整するとよりきれいに表示されます。

まとめ

このボタンは、疑似要素によるカラーレイヤーとブレンドモードを組み合わせることで、グリッチ感のあるネオンUIをCSSだけで実装したものです。

構造はシンプルですが視覚効果が強く、ランディングページやヒーローセクション、CTAボタンなどのアクセントとして効果的に使うことができます。

Related 関連記事