Moving Border

DEMO

<div class="demo-stage mvb-stage">
  <button type="button" class="mvb-btn"><span class="mvb-inner">Borders are cool</span></button>
</div>

@property --mvb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.mvb-stage { display:flex; align-items:center; justify-content:center; padding:2rem; background:#0B0B10; min-height:280px; }
.mvb-btn {
  position:relative; padding:2px; border:0; border-radius:14px; cursor:pointer;
  background: conic-gradient(from var(--mvb-angle), transparent 0 72%, #E91B89 82%, #fff 88%, #5BAADE 94%, transparent 100%), rgba(255,255,255,.12);
  animation: mvb-spin 3.2s linear infinite;
  transition: transform .2s ease;
}
.mvb-inner { display:block; padding:.9rem 1.8rem; border-radius:12px; background:#121216; color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; }
.mvb-btn:hover { transform:translateY(-2px); }
.mvb-btn:focus-visible { outline:2px solid #E91B89; outline-offset:4px; }
@keyframes mvb-spin { to { --mvb-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .mvb-btn { animation:none; --mvb-angle: 220deg; transition-duration:.01ms; }
}

AI PROMPT

ボタンの縁に沿って小さな光が一周し続ける Moving Border ボタンをCSSだけで作って。@property --mvb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } で角度を型付きのカスタムプロパティとして登録する（登録しないとカスタムプロパティは補間されず、アニメーションが途中を飛ばして切り替わる）。外側の button に padding: 2px を取り、background に conic-gradient(from var(--mvb-angle), transparent 0 72%, ピンク 82%, 白 88%, 水色 94%, transparent 100%) と薄い白の2層を敷く。内側の span を濃い色で塗ると、外側の2pxだけが枠として見え、光の帯がその上を回る。@keyframes で --mvb-angle を 360deg まで3.2秒 linear で無限ループさせる。border-radius は外側14px・内側12px（外側 − padding）にして角の太さをそろえる。@media (prefers-reduced-motion: reduce) では回転を止め、光を固定位置に置いたままにする。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。