光るボーダー CTA セクション
周囲のボーダーが虹色に回転して光る、目を引く CTA セクションです。 ::before 疑似要素を本体より少し外側（ inset:-3px ）に敷き、 conic-gradient の円錐グラデーションを rotate で回し続けることで、縁がぐるりと発光しているように見せています。
解説
周囲のボーダーが虹色に回転して光る、目を引く CTA セクションです。::before 疑似要素を本体より少し外側（inset:-3px）に敷き、conic-gradient の円錐グラデーションを rotate で回し続けることで、縁がぐるりと発光しているように見せています。本体は overflow:hidden で角丸の内側にきれいに収まります。
適した場面
- ランディングページ最下部の最終コンバージョン誘導
- 無料トライアルや申し込みへの強い一押し
- キャンペーン告知のハイライトブロック
光の色は conic-gradient の色停止を、回転速度は animation の秒数を変えると印象が変わります。光の太さは外側にはみ出す量で調整します。常時回転する強い装飾は他の要素と競合しやすいため、ページ内で 1 箇所に絞るのが効果的です。動きを抑えたいユーザー向けに prefers-reduced-motion で回転を止める配慮も検討してください。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
光の色を変えられますか。
変えられます。conic-gradient に並べた色を差し替えるだけで、ブランドカラーに合わせた発光に調整できます。
光がはみ出して見えません。
本体に overflow:hidden が効いていると外側の光が切れます。発光させたい部分は本体の外に配置し、回転する疑似要素を背面に置く構成になっているか確認してください。