Cyberpunk Glitch Button

プレビュー

ダークテーマやSF風のUIに最適な、ネオン発光とホバー時のグリッチエフェクトを備えたボタンです。

ユースケースと特徴

サイバーパンク・SFテイスト：ゲームUI、Web3系サービス、クリエイティブなポートフォリオなど、非日常感や未来的な世界観を演出したいプロジェクトに最適です。
ネオン発光とグリッチエフェクト：ホバー時にベースカラーが切り替わり、荒々しいグリッチアニメーションが発動することで、ユーザーに強烈なインパクトを与えます。
clip-path による軽量なシェイプ描画：角が欠けたような独特の形状は、画像を使用せずCSSの clip-path のみで表現しているため、解像度に依存せず軽量に動作します。

デザインとUXのポイント

明確な視覚的フィードバック: ホバー時のダイナミックな変化（シアンからマゼンタへの色遷移と発光）により、インタラクティブな要素であることが直感的に伝わります。
多重レイヤーによる立体感: 擬似要素（::before、::after）と装飾要素（.decoration）を組み合わせることで、奥行きのあるメカニカルなフレームを構築しています。
アクセシビリティへの配慮: グリッチエフェクト用に複製したテキストには aria-hidden="true" を付与し、スクリーンリーダー等による重複読み上げを防止しています。

カスタマイズ方法

CSS変数を上書きするだけで、プロジェクトのテーマカラーに合わせたサイバーパンクボタンを容易に作成できます。

.cyber-btn {
  /* メインカラー（通常時の色） */
  --primary-color: #00ffcc;
  
  /* セカンダリカラー（ホバー時の色） */
  --secondary-color: #ff00ff;
  
  /* 背景色（内側の暗い部分） */
  --bg-color: #050505;
}

フォントに等幅フォント（monospace）を指定することで、ハッキング画面やシステムコンソールのような雰囲気をより一層強調できます。

実装コード

<button class="cyber-btn">
<span class="main-text">SYSTEM_READY</span>
<span class="glitch-text" aria-hidden="true">SYSTEM_READY</span>
<span class="decoration"></span>
</button>

<style>
/* カスタムプロパティと基本スタイル */
.cyber-btn {
--primary-color: #00ffcc;
--secondary-color: #ff00ff;
--bg-color: #050505;

position: relative;
padding: 1rem 2.5rem;
font-family: 'Courier New', Courier, monospace;
font-size: 1.2rem;
font-weight: bold;
letter-spacing: 0.15em;
color: var(--primary-color);
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
}

/* 背景レイヤー */
.cyber-btn::before,
.cyber-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transition: all 0.3s ease;
}

/* 外側のフレーム（角欠け形状） */
.cyber-btn::before {
background-color: var(--primary-color);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
z-index: -2;
}

/* 内側の背景（フレームとの差分でボーダーを表現） */
.cyber-btn::after {
background-color: var(--bg-color);
clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));
z-index: -1;
}

/* グリッチ用の隠しテキスト */
.cyber-btn .glitch-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-color);
color: var(--secondary-color);
clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));
opacity: 0;
z-index: 1;
}

/* メインテキスト */
.cyber-btn .main-text {
position: relative;
z-index: 2;
text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
transition: all 0.3s ease;
}

/* ホバー時のスタイル変更 */
.cyber-btn:hover::before {
background-color: var(--secondary-color);
box-shadow: 0 0 20px var(--secondary-color);
}

.cyber-btn:hover .main-text {
opacity: 0;
}

.cyber-btn:hover .glitch-text {
opacity: 1;
animation: cyber-glitch-anim 0.25s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* 右下の小さな三角形の装飾 */
.cyber-btn .decoration {
position: absolute;
bottom: -1px;
right: -1px;
width: 20px;
height: 20px;
background-color: var(--primary-color);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 3;
transition: all 0.3s ease;
}

.cyber-btn:hover .decoration {
background-color: var(--secondary-color);
box-shadow: 0 0 10px var(--secondary-color);
}

/* グリッチアニメーションの定義 */
@keyframes cyber-glitch-anim {
0% {
  clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  transform: translate(-4px, 2px);
  color: var(--primary-color);
}
20% {
  clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
  transform: translate(4px, -2px);
  color: #fff;
}
40% {
  clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  transform: translate(-4px, 2px);
  color: var(--secondary-color);
}
60% {
  clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
  transform: translate(4px, 2px);
  color: var(--primary-color);
}
80% {
  clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%);
  transform: translate(-2px, -2px);
  color: #ff0;
}
100% {
  clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%);
  transform: translate(2px, -2px);
  color: var(--secondary-color);
}
}
</style>

ブラウザ対応状況

描画には clip-path および標準的なCSSアニメーションを使用しており、最新の主要ブラウザで問題なく動作します。

Chrome: 55+
Firefox: 54+
Safari: 10.1+
Edge: 79+