css-micro-fx

CSS マイクロエフェクト

入力欄、ボタン、ローダー、テキストリンクに機能的なフィードバック効果を加えます。 これらはホバーではなく、:focus / :active / 状態の変化に反応します。

---

ステップ 1 — コンテキストとスタイルを判定する

適用する前に、既存の UI を確認してください。

確認する項目

Form density
  few fields, large padding  → marketing / signup page → Shine, Bubble
  many fields, tight layout  → app / dashboard        → Bars, subtle Highlight

Button prominence
  large CTA (full-width or hero)  → Shine or Slide
  small inline button             → Jelly or Pulse

Color palette
  monochrome / muted  → MINIMAL → Bars, Highlight only
  vivid accent color  → BOLD    → all effects

Existing focus styles
  outline: none (reset)  → must add visible focus → use Bars or Glow
  outline present        → enhance, don't replace
  
Dark background
  yes → use lighter glow variants
  no  → standard effects

スタイル分類（css-hover-effects と同じ）

スタイル	主な特徴	強度
MINIMAL	落ち着いた配色、大きな角丸	バー、ハイライトのみ
BOLD	鮮やかなアクセント、強いシャドウ	シャイン、スライド、バブル
PLAYFUL	丸みがあり、カラフル	ジェリー、バブル、パルス
CORPORATE	コンパクトなレイアウト、落ち着いた配色	バー、控えめなグロー
DARK-PREMIUM	暗い背景、光るアクセント	グロー、アクセント付きバー

---

ステップ 2 — 互換性マトリックス

エフェクト	MINIMAL	BOLD	PLAYFUL	CORPORATE	DARK-PREMIUM
バー（入力欄）	✅ ★	✅	✅	✅ ★	✅
ハイライト（入力欄）	✅	✅	✅	✅	✅
グロー（入力欄）	❌	✅	✅	❌	✅ ★
バブル（ボタン）	❌	✅	✅ ★	❌	❌
ジェリー（ボタン）	❌	✅	✅ ★	❌	❌
シャイン（ボタン）	❌	✅ ★	✅	❌	✅
スライド（ボタン）	✅	✅ ★	✅	✅	✅
パルス（ボタン）	❌	✅	✅	❌	❌
ピラー（ローダー）	✅	✅	✅	✅	✅
オーバーライン（ローダー）	✅ ★	✅	✅	✅ ★	✅
取り消し線（完了時）	✅	✅	✅	✅	✅
下線（リンク）	✅ ★	✅	✅	✅	✅

---

ステップ 3 — エフェクトライブラリ

---

カテゴリー：入力欄のフォーカスエフェクト

<input>、<textarea>、<select> に適用します。 アクセシビリティのため、常に視認できるフォーカスリング、またはその代替となるものを組み合わせてください。

バー

下線が中央からスライドして表示されます。シンプルで、幅広く使えます。 最適なスタイル：すべてのスタイル。不明な場合のデフォルトの選択肢です。

.fx-input-bars {
  --accent: #6366f1;
  border: none;
  border-bottom: 2px solid #e4e4e7;
  border-radius: 0;
  padding: 10px 4px;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease;
  position: relative;
}
.fx-input-bars:focus {
  border-bottom-color: var(--accent);
}
/* Optional: animated line variant */
.fx-input-bars-animated {
  border: none;
  border-bottom: 2px solid #e4e4e7;
  outline: none;
  padding: 10px 4px;
  width: 100%;
  font-size: 14px;
  background: transparent;
}
.fx-input-bars-animated + .bar-line {
  display: block;
  height: 2px;
  background: var(--accent, #6366f1);
  width: 0;
  transition: width 0.3s ease;
  margin-top: -2px;
}
.fx-input-bars-animated:focus + .bar-line {
  width: 100%;
}

アニメーション版の HTML：

<input class="fx-input-bars-animated" type="text" placeholder="Name">
<span class="bar-line"></span>

---

ハイライト

フォーカス時に背景が柔らかく色づきます。角丸の入力欄やカード形式のフォームに適しています。

.fx-input-highlight {
  --accent: #6366f1;
  --highlight: rgba(99, 102, 241, 0.08);
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  font-size: 14px;
  background: white;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.fx-input-highlight:focus {
  border-color: var(--accent);
  background-color: var(--highlight);
}

---

グロー

フォーカスリングが光ります。DARK-PREMIUM と BOLD のスタイルに適しています。

.fx-input-glow {
  --accent: #6366f1;
  --glow: rgba(99, 102, 241, 0.25);
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.fx-input-glow:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow);
}

---

ラベルフロート

入力欄がフォーカスされたとき、または値が入力されているときに、ラベルが上に移動します。 ラベルを入力欄の内側に配置するフォーム向けです。

.fx-field-float {
  position: relative;
  padding-top: 16px;
}
.fx-field-float input {
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 14px 14px 6px;
  outline: none;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease;
}
.fx-field-float label {
  position: absolute;
  left: 14px;
  top: 26px;
  font-size: 14px;
  color: #a1a1aa;
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.fx-field-float input:focus,
.fx-field-float input:not(:placeholder-shown) {
  border-color: #6366f1;
}
.fx-field-float input:focus + label,
.fx-field-float input:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 11px;
  color: #6366f1;
}

HTML：

<div class="fx-field-float">
  <input type="text" id="name" placeholder=" ">
  <label for="name">Full name</label>
</div>

---

カテゴリー：ボタンのクリックエフェクト

<button> 要素に適用します。:active または JS のクラスによって発動します。

バブル

:active のとき、クリックした位置から波紋の円が広がります。

.fx-btn-bubble {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fx-btn-bubble::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 120%;
  padding-top: 120%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.4s ease;
}
.fx-btn-bubble:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: 0s;
}

---

ジェリー

クリック時に弾力のあるスクイッシュ効果が生じます。PLAYFUL と BOLD 専用です。

.fx-btn-jelly {
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fx-btn-jelly:active {
  animation: fx-jelly 0.4s ease;
}
@keyframes fx-jelly {
  0%  { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.12); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.96, 1.04); }
  100% { transform: scale(1, 1); }
}

---

シャイン

ホバー時に光がボタンを斜めに横切ります。プレミアムな CTA の印象を与えます。

.fx-btn-shine {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fx-btn-shine::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -100%;
  width: 60%;
  height: 220%;
  background: rgba(255, 255, 255, 0.22);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}
.fx-btn-shine:hover::after {
  left: 140%;
}

---

スライド

ホバー時に背景色が左からスライドして表示されます。幅広く使えます。

.fx-btn-slide {
  --slide-color: var(--accent, #6366f1);
  --text-hover: white;
  position: relative;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
}
.fx-btn-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--slide-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.fx-btn-slide:hover::before {
  transform: translateX(0);
}
.fx-btn-slide:hover {
  color: var(--text-hover);
}

---

パルス

リングが継続的に脈打ちます。単一のアクションボタンに注意を引きつけます。 ページ内で使用するのは最大 1 要素にしてください。

.fx-btn-pulse {
  --pulse-color: rgba(99, 102, 241, 0.4);
  position: relative;
  cursor: pointer;
}
.fx-btn-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pulse-color);
  animation: fx-pulse-ring 1.5s ease infinite;
}
@keyframes fx-pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

---

プレス

クリック時に奥行きが控えめに沈み込みます。「ボタンが押し込まれる」ような触覚的な印象を与えます。 どのスタイルでも使えます。最も控えめな選択肢です。

.fx-btn-press {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.fx-btn-press:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

---

カテゴリー：ローディング状態

非同期処理の実行中に使用します。 必要に応じて、JS でローディングクラスを切り替えます。

ピラー

5 本のバーが順番に波打ちます。コンパクトで、ボタン内にも収まります。

.fx-loader-pillars {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 18px;
  vertical-align: middle;
}
.fx-loader-pillars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: fx-pillars 0.9s ease infinite;
}
.fx-loader-pillars span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.fx-loader-pillars span:nth-child(2) { height: 12px; animation-delay: 0.12s; }
.fx-loader-pillars span:nth-child(3) { height: 18px; animation-delay: 0.24s; }
.fx-loader-pillars span:nth-child(4) { height: 12px; animation-delay: 0.36s; }
.fx-loader-pillars span:nth-child(5) { height: 6px;  animation-delay: 0.48s; }
@keyframes fx-pillars {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

HTML：

<div class="fx-loader-pillars">
  <span></span><span></span><span></span><span></span><span></span>
</div>

---

オーバーライン

プログレスバーが全幅を横切ります。ページ全体またはセクションのローディングに適しています。

.fx-loader-overline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(99, 102, 241, 0.15);
  z-index: 9999;
  overflow: hidden;
}
.fx-loader-overline::after {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 0 2px 2px 0;
  animation: fx-overline 1.1s ease infinite;
}
@keyframes fx-overline {
  to { left: 100%; }
}

使用方法：ルート変更時または fetch 時に .fx-loader-overline div を追加／削除します。

---

ドットスピナー

3 つのドットが順番に点滅します。インラインの「入力中」／「思考中」状態に適しています。

.fx-loader-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.fx-loader-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: fx-dot-pulse 1.2s ease infinite;
}
.fx-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.fx-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fx-dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

---

リングスピナー

定番の円形スピナーです。ボタンやインラインローダーに適しています。

.fx-spinner-ring {
  --size: 18px;
  --thickness: 2px;
  --color: currentColor;
  width: var(--size);
  height: var(--size);
  border: var(--thickness) solid rgba(255,255,255,0.25);
  border-top-color: var(--color);
  border-radius: 50%;
  animation: fx-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

---

取り消し線

タスクの完了時に、テキストに線が引かれます。

.fx-done {
  position: relative;
  display: inline-block;
  color: #a1a1aa;
}
.fx-done::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.5px;
  width: 0;
  background: var(--accent, #22c55e);
  animation: fx-strike 0.4s ease forwards;
}
@keyframes fx-strike {
  to { width: 100%; }
}

タスクが完了したとき、JS で .fx-done クラスを適用します。

---

カテゴリー：テキストリンクエフェクト

本文内の <a> タグに適用します。

下線描画

ホバー時に左から線が描画されます。静的な下線の代わりに使用できます。

.fx-link-draw {
  --accent: #6366f1;
  text-decoration: none;
  position: relative;
  color: var(--accent);
}
.fx-link-draw::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 1.5px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}
.fx-link-draw:hover::after { width: 100%; }

---

下線スライドアウト

線が常に表示され、スライドして消えた後、再び現れます。意外性のある反転効果です。

.fx-link-slide {
  --accent: #6366f1;
  text-decoration: none;
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: background-size 0.25s ease;
}
.fx-link-slide:hover {
  background-size: 0% 1.5px;
}

---

カラーシフト

ホバー時にテキストの色がアクセントカラーに変化します。シンプルで安心して使えます。

.fx-link-color {
  --accent: #6366f1;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.fx-link-color:hover { color: var(--accent); }

---

ステップ 4 — css-hover-effects との組み合わせ

この 2 つのスキルは連携して使えるように設計されています。

css-hover-effects    →  :hover state (mouse enter)
css-micro-fx         →  :focus / :active / state change

例：洗練されたボタン

/* hover-effects handles the hover state */
.btn { /* hvr-shine applied */ }

/* micro-fx handles the click */
.btn { /* fx-btn-jelly applied */ }

/* Together: shine on hover, jelly on click */

例：洗練された入力欄

/* micro-fx handles focus */
.input { /* fx-input-bars applied */ }

/* hover-effects adds a subtle border hint on hover */
.input:hover { border-color: #c4b5fd; }

---

ステップ 5 — アプリケーションのチェックリスト

• フォームのコンテキスト（マーケティング向けかアプリ向けか）を特定し、強度を調整する
• 入力エフェクトを選択する（ミニマル／コーポレート向けは Bars、ダーク／大胆なデザイン向けは Glow）
• prefers-reduced-motion ブロックを適用する（スタイルシートごとに 1 回）
• Pulse は 1 ページにつき 1 つ以下のボタンで使用する
• Overline ローダーをルート／フェッチのライフサイクルに連動させる
• Strikethrough は CSS のみではなく、JS のクラスでトリガーする
• すべてのエフェクトで、既存のパレットを参照する var(--accent) を使用する

/* Always include — paste once at the top of any stylesheet using these effects */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

クイックリファレンス

用途	エフェクト	クラス
ミニマルなスタイルで入力欄にフォーカス	Bars animated	fx-input-bars-animated
どのスタイルでも入力欄にフォーカス	Highlight	fx-input-highlight
ダーク／大胆なスタイルで入力欄にフォーカス	Glow	fx-input-glow
フローティングラベル	Label Float	fx-field-float
遊び心のあるボタンクリック	Jelly	fx-btn-jelly
高級感のあるボタンクリック	Bubble	fx-btn-bubble
ボタンにホバー時の輝きを追加	Shine	fx-btn-shine
ボタンにホバー時のスライドを追加	Slide	fx-btn-slide
CTA に注目を集める	Pulse	fx-btn-pulse
押したときの感触を再現	Press	fx-btn-press
ボタン内のローディング	Pillars	fx-loader-pillars
ページ全体のローディング	Overline	fx-loader-overline
チャット／AI の思考中	Dots	fx-loader-dots
汎用スピナー	Ring	fx-spinner-ring
タスク完了	Strikethrough	fx-done
本文のリンク	Underline Draw	fx-link-draw