ボタンにマウスを乗せた瞬間、枠線がスーッと描かれていく——そんなアニメーションを見たとき、「CSSだけでここまでできるのか」と思いました。stroke-dasharrayとstroke-dashoffsetという2つのSVGプロパティをCSSでアニメーションさせる手法で、::beforeや::afterを使った擬似要素ボーダーでは出せない「正確なコーナー描画」と「描き順のコントロール」が実現できます。
今回は5種類のSVGドロー系ボタンを紹介します。全周がスムーズに描かれる基本形・4辺が時間差で順番に描かれるシーケンシャル型・ホバーで枠が消えていく逆方向・内外2重線が逆向きに描かれるゴージャスな二重枠・サインのように流れる曲線パスの5バリエーションです。インラインSVGとCSSアニメーションの組み合わせで、JavaScriptは不要です。
Draw Rect（ドロー・レクト）
SVGの<rect>要素にstroke-dasharrayとstroke-dashoffsetを設定する、もっとも基本的なSVGドロー実装です。stroke-dasharrayに矩形の周長（約496px）を設定し、stroke-dashoffsetを同じ値から0に変化させることで「全線が隠れた状態→全線が描かれた状態」へとアニメーションします。
ダーク背景にインディゴ系の枠線という組み合わせで、ポートフォリオやプロダクト紹介ページのCTAボタンとの相性が良いです。::beforeの擬似要素ボーダーでは角丸コーナーの描画が難しいですが、SVGの<rect rx="6"/>は正確に角丸が描かれます。
See the Pen Draw Rect by BaseKENT (@basekent) on CodePen.
調整方法
- 描画速度:
transition: stroke-dashoffset 0.6s easeの秒数を変更してください。0.3sで素早く、1.0sでゆっくり描かれます - 線の色:
stroke: #818cf8（インディゴ系）をお好みのカラーに変更してください - 周長の計算: ボタンサイズを変えた場合は
stroke-dasharrayの値も変更が必要です。計算式は2 × (width + height)です
Sequential Sides（シーケンシャル・サイドズ）
上→右→下→左の順に4辺が時間差で描かれていくボタンです。4つの<line>要素それぞれにtransition-delayを設定することで、辺ごとに「前の辺が描き終わったら次の辺が始まる」という連鎖を作っています。1本の<rect>アニメーションとは異なり、「どの辺から描き始めるか」「各辺の描画時間をどう配分するか」を細かくコントロールできます。
グリーン系の線でダークな背景に合わせており、段階的な進行や「準備完了」の演出として使いやすいデザインです。フォームのステップ表示や、コンテンツがロードされたときのUI表示にも応用できます。
See the Pen Sequential Sides by BaseKENT (@basekent) on CodePen.
調整方法
- 各辺の遅延:
.topのtransition-delay: 0.0sから始まり、以降の辺に0.2sずつ加算しています。この値を変えることでテンポが変わります - 描画方向:
x1/y1とx2/y2の座標を入れ替えると、逆方向から描かれます（右→左、下→上など） - 線の色:
stroke: #34d399（エメラルド系）をお好みのカラーに変更してください
Reverse Erase（リバース・イレース）
「描かれている枠がホバーで消えていく」逆方向のアニメーションです。Draw Rectとまったく逆の発想で、初期状態ではstroke-dashoffset: 0（枠が全部見えている）から、ホバー時にstroke-dashoffset: 496（枠が全部隠れる）へ変化させます。
「消えていく」という動きは「描かれる」よりも珍しく、意外性があります。ライトな背景にオレンジ系の枠線という組み合わせで、削除・キャンセル・リセット系のボタンに使うと「この操作で何かが取り消される」という視覚的なメッセージを自然に伝えられます。カーソルを外すと枠が戻ってくる動きも含めてデザインの一部になっています。
See the Pen Reverse Erase by BaseKENT (@basekent) on CodePen.
調整方法
- 消える速さ:
transition: stroke-dashoffset 0.6s easeの秒数を調整してください - 線の色:
stroke: #ea580c（オレンジ系）をお好みのカラーに変更してください - 用途の切り替え: ホバー前の状態を
stroke-dashoffset: 496（非表示）・ホバー後を0（描画）に戻せばDraw Rectと同じ動きになります。初期値の違いで演出の向きが逆になります
Double Stroke（ダブル・ストローク）
外側と内側の2つの<rect>を重ね、外側は描かれながら内側は消えていく逆向きアニメーションです。ゴールド系の2色（アンバーと薄いゴールド）を組み合わせたダーク背景のボタンで、高級感や格式を演出できます。
SVGの<rect>を2つ入れ子にするだけで実装できるため、コードの追加量は最小限です。外枠と内枠が逆向きに動くことで、見た目には複雑な演出をしているように見えますが、仕組みはstroke-dashoffsetの方向を逆にしているだけです。ラグジュアリー系・プレミアム系のサービスページや、VIP向けLPのCTAボタンとして差別化できます。
See the Pen Double Stroke by BaseKENT (@basekent) on CodePen.
調整方法
- 外側・内側の色:
.outerのstroke: #f59e0bと.innerのstroke: #fcd34dをセットで変更してください。同系色の濃淡を使うと品が出ます - 2つの矩形サイズ:
outerとinnerのx/y/width/heightを調整してください。内側のstroke-dasharrayも周長に合わせて更新が必要です（2 × (width + height)） - アニメーション方向:
innerの初期値と最終値を逆にすると（0→464を464→0に）2本とも同じ方向に描かれます
Path Signature（パス・シグネチャー）
SVGの<path>要素に波形の曲線を定義し、サインのように流れる線がボタンを横切るアニメーションです。<rect>の直線的な描画とは異なり、Q（二次ベジエ曲線）を使った手書き風の曲線が「人間らしさ」を演出します。バイオレット系の曲線がボタン中央を流れるデザインで、アート系・クリエイティブ系のサイトに特に映えます。
stroke-dasharrayに250を指定していますが、これはpathLengthの近似値です。パスの形状を変えた場合は、ブラウザのデベロッパーツールでgetTotalLength()の値を確認して合わせると正確な描画になります。
See the Pen Path Signature by BaseKENT (@basekent) on CodePen.
調整方法
- 曲線の形状:
pathのd属性の値を変えることで曲線の形が変わります。Qの制御点（30,6などの座標）を動かしてカーブの強さを調整してください - 描画速度:
transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1)を変更してください。イージングをease-inにするとゆっくり加速する筆記感になります - 線の色:
stroke: #7c3aed（バイオレット系）をお好みのカラーに変更してください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
