Shimmer Button

DEMO

CODE

<div class="demo-stage shb-stage">
  <button class="shb-btn" type="button"><span class="shb-inner">SHIMMER BUTTON</span></button>
</div>

.shb-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.shb-btn {
  position:relative; padding:2px; border:none; border-radius:999px;
  cursor:pointer; background:transparent; overflow:hidden;
}
.shb-btn::before {
  content:''; position:absolute; inset:-150%;
  background:conic-gradient(from 0deg, transparent 0deg 300deg, rgba(233,27,137,.9) 330deg, #fff 345deg, rgba(233,27,137,.9) 360deg);
  animation: shb-spin 2.4s linear infinite;
}
@keyframes shb-spin { to { transform:rotate(360deg); } }
.shb-inner {
  position:relative; display:block; padding:1rem 2.6rem; border-radius:999px;
  background:#15151A; color:#fff;
  font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.22em;
  transition: background .3s ease;
}
.shb-btn:hover .shb-inner { background:#1F1F26; }

AI PROMPT

ボタンの縁を光が周回し続けるシマーボタンをCSSだけで作って。外側の button は padding: 2px（＝光る縁の太さ）・border-radius: 999px・overflow: hidden。その ::before を inset: -150% で大きく敷き、background: conic-gradient(from 0deg, transparent 0deg 300deg, アクセント色 330deg, #fff 345deg, アクセント色 360deg) の細い光弧を作って animation: rotate 360deg を無限ループ。内側の span が背景色で中央を覆うことで、はみ出した光は2pxの縁だけに見える。回転は transform なので再描画コストが低い。ホバーで内側の背景をわずかに明るくするとCTAらしくなる。LPの主ボタン・登録ボタンに。

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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。