反復線形グラデーションによる動的ストライプ表示

固定幅のバーに規則的な斜めストライプを描画するには、repeating-linear-gradient を活用します。角度を-45度に設定し、2色を10px単位で交互に繰り返すことで、滑らかで視認性の高いプログレスインジケータを構築できます。

<style>
.striped-bar {
  height: 1.2rem;
  width: 360px;
  background: repeating-linear-gradient(
    -45deg,
    #4a90e2 0px, 
    #4a90e2 12px, 
    #2c3e50 12px, 
    #2c3e50 24px
  );
  border-radius: 0.4rem;
}
</style>
<div class="striped-bar"></div>

グラデーション＋シャドウによるインタラクティブボタン

縦方向の線形グラデーションと柔らかなドロップシャドウを組み合わせることで、奥行きのあるボタンを実装します。:active擬似クラスでは、内側シャドウ（inset）と透明度付き影を重ねて押し込まれた印象を与えます。

<style>
.interactive-btn {
  padding: 0.9rem 1.4rem;
  border: none;
  font-size: 0.875rem;
  color: #fff;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, #4a90e2, #2c3e50);
  box-shadow: 0.15rem 0.15rem 0.6rem rgba(44, 62, 80, 0.4);
  transition: all 0.15s ease;
}

.interactive-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.3);
}

.interactive-btn:active {
  box-shadow: 
    inset 0 0 0.4rem rgba(44, 62, 80, 0.6),
    inset 0 0.3rem 0.8rem rgba(0, 0, 0, 0.3);
}
</style>
<button class="interactive-btn">Submit Form</button>

ミニマルなフラットデザインボタン

過剰な装飾を排したフラットスタイルでは、カラーバリエーションと微細なシャドウで状態変化を表現します。:hover時と:active時の背景色を段階的に変更し、ユーザー操作に対し即応性のあるフィードバックを提供します。

<style>
.flat-btn {
  padding: 0.85rem 1.3rem;
  border: none;
  background-color: #4a90e2;
  color: white;
  font-size: 0.95rem;
  border-radius: 0.35rem;
  box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.flat-btn:hover {
  background-color: #357abd;
  box-shadow: 0 0.25rem 0.4rem rgba(0, 0, 0, 0.16);
}

.flat-btn:active {
  background-color: #2c3e50;
  transform: translateY(0.05rem);
}
</style>
<button class="flat-btn">Get Started</button>

視差効果を伴う3D風ボタン

シャドウの位置・サイズとテキストシャドウ、さらにtransform: translateY()を連携させることで、物理的な押下感を再現します。:active時には影を上方に収縮させ、ボタンの垂直移動と視覚的に整合させます。

<style>
.depth-btn {
  padding: 0.8rem 1.25rem;
  border: none;
  font-size: 0.9rem;
  color: white;
  background-color: #4a90e2;
  border-radius: 0.4rem;
  box-shadow: 0 0.45rem 0 #2c3e50;
  text-shadow: 0.08rem 0.08rem 0 #2c3e50;
  transition: all 0.12s cubic-bezier(0.2, 0, 0, 1);
}

.depth-btn:active {
  background-color: #357abd;
  transform: translateY(0.12rem);
  box-shadow: 0 0.32rem 0 #2c3e50;
  text-shadow: 0.06rem 0.06rem 0 #2c3e50;
}
</style>
<button class="depth-btn">Confirm Action</button>