ボタンのデザインを変えるとき、背景色やテキストを変えることが多いと思います。でも実は「ボーダー（枠線）を動かす」アプローチも、静止したデザインに動きとリズムを加えるのに効果的です。伸びる・回転する・流れる・パルスする。それぞれ全く違う印象を与えながら、どれもCSSだけで実装できます。
この記事では、::before / ::after 疑似要素・conic-gradient・@keyframes・background-positionなどのテクニックを使ったボーダーアニメーションを5本紹介します。JavaScriptなしで動き、コピペでそのまま使えます。WordPress / SWELLのカスタムCSSにも対応しています。
Border Draw（ボーダー・ドロー）
ホバーした瞬間、枠線が右上から時計回りに「描かれていく」アニメーションです。::before（右上起点）が上辺から右辺の順に、::after（左下起点）が下辺から左辺の順に遅れて伸びていく。2つの疑似要素のtransitionに時間差（0.2s / 0.4s / 0.6s）をつけることで、合計4辺が順番に現れる視覚効果を作っています。
width: 0 → 100%とheight: 0 → 100%をずらして遷移させるだけのシンプルな実装ですが、「手書きのように枠が描かれる」という印象は強い。ポートフォリオのナビゲーション・テキスト系LPのセカンダリCTAに向いています。デフォルトはボーダーなしで静止しているので、存在感を抑えたい場面にも使いやすいです。
See the Pen Border Draw by BaseKENT (@basekent) on CodePen.
調整方法
- 描画速度:
0.2sの値を変えてください。4つのtransition値を同じ比率で短くすると素早く、長くするとゆっくり描かれます - ボーダー色:
#5c6bc0をお好みのカラーに変更してください。テキスト色と揃えるとまとまります - 線の太さ:
2px solidの2pxを変更してください。3px以上にすると存在感が増します
Rotating Border（ローテーティング・ボーダー）
conic-gradientで作ったカラーグラデーションの円を@keyframesで360度回転させることで、ボーダーが光の帯のように回り続けるデザインです。技術的には3層構造：①ボタン本体（背景色・テキスト）、②::before（回転するグラデーション円）、③::after（内側をくり抜くカバー）。overflow: hiddenでボタン枠に収め、animation-play-state: pausedでホバーまで静止させています。
ホバー前は無地ボタンに見え、ホバーするとボーダーが回り始めるため、動きのアクセントとして機能します。ダーク系背景との相性が特に良く、テクノロジー系・ゲーム系・ポートフォリオのメインCTAに向いています。
See the Pen Rotating Border by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
2s linear infiniteの2sを短くすると速く、長くするとゆっくり回転します - グラデーション色:
conic-gradient内の色値を変えてください。単色にするとモノクロームな回転ボーダーになります - ボーダー幅:
::afterのinset: 2pxの数値を大きくするほどボーダーが太くなります
Dash March（ダッシュ・マーチ）
repeating-linear-gradientを4辺分組み合わせて疑似的な破線ボーダーを作り、background-positionのアニメーションで破線が時計回りに行進するように流れる演出です。border: dashedではアニメーションできないため、背景画像として4辺の破線を再現するのがこのテクニックの核心。プロの世界では「マーチング・アンツ（行進する蟻）」と呼ばれる、画像選択時のような動きをCSSだけで作っています。
静止状態でも破線ボーダーとしてデザインが成立するため、ホバー前後どちらも使える点が実用的です。コーポレート系よりも、クリエイティブ系・アート系・開発者向けサイトに向いています。
See the Pen Dash March by BaseKENT (@basekent) on CodePen.
調整方法
- 破線の長さ:
repeating-linear-gradient内の6pxを変更します。大きくすると破線が長く、小さくすると短くなります。2か所セットで変えてください - 流れる速度:
0.6s linear infiniteの0.6sを変えます。短くすると速く流れます - 線の太さ:
background-size: 2px 100%の2pxを変更してください。4つのbackground-sizeすべて同じ値に揃えます
Corner Expand（コーナー・エクスパンド）
対角の2か所（左上・右下）にコーナーラインを配置し、ホバーで枠全体に広がる演出です。::beforeを左上、::afterを右下に配置し、width: 14px / height: 14pxからwidth: 100% / height: 100%に広がるtransitionをかけています。2本のL字が対角から伸びて枠を完成させる、シンプルだけど洗練された動きです。
静止状態でも対角のコーナーラインが見えているため、「ホバーする前から存在感がある」のが他のボーダー系デモとの違いです。ミニマルで高級感のあるデザインに向いています。ダーク系背景のポートフォリオや、コーポレートサイトのHoverエフェクトに。
See the Pen Corner Expand by BaseKENT (@basekent) on CodePen.
調整方法
- 静止時のコーナーサイズ:
width: 14px; height: 14pxを変更します。8pxにすると控えめ、20pxにすると静止状態でも存在感が増します - コーナー色:
#4facfeをブランドカラーに合わせてください - 展開速度:
transition: 0.3s easeを変更。0.5sにするとゆったりした広がりに
Border Glow（ボーダー・グロウ）
borderとbox-shadowを@keyframesでアニメーションさせ、ボーダーの色と発光がパープルとブルーの間をゆっくり行き来するデザインです。1.2秒かけて色と光が変化し続けるため、ホバー中の「選択されている」感覚を強調します。5本の中でもっとも実装がシンプルで、animationプロパティを追加するだけで動作します。
ネオン発光系のデザインと相性が良く、ゲーム系・音楽系・テクノロジー系のサイトで使いやすい。Rotating Borderと合わせてダーク系サイトに導入すると、動きのある表現の幅が広がります。
See the Pen Border Glow by BaseKENT (@basekent) on CodePen.
調整方法
- 発光色のペア:
#f093fb（パープル）と#4facfe（ブルー）をブランドカラーに変えてください。2色の差が大きいほど色変化が際立ちます - パルス速度:
1.2s ease-in-out infiniteの1.2sを短くするほどテンポが速くなります。0.8sでビートを感じる速さに - 発光強度:
box-shadowの20pxと40pxを大きくするほどグロー範囲が広がります。10px / 20pxに下げると控えめな発光に
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
