ステッチ枠 縫い目ボタン
ステッチ枠ボタンは、 border: 2px dashed の破線でステッチ（縫い目）を描き、その内側に outline を outline-offset:-6px で重ねることで、布地に縁取りを縫い付けたような手作り感を出します。破線が縫い糸、内側のラインが生地の縁を思わせ、温かみのあるクラフト調に仕上がります。
解説
ステッチ枠ボタンは、border: 2px dashed の破線でステッチ（縫い目）を描き、その内側に outline を outline-offset:-6px で重ねることで、布地に縁取りを縫い付けたような手作り感を出します。破線が縫い糸、内側のラインが生地の縁を思わせ、温かみのあるクラフト調に仕上がります。土色（#B5651D）の背景に白い破線という配色が素朴さを強め、ホバーで背景と枠線が一段濃い色に沈みます。すべて CSS で完結し、JavaScript は不要です。
向いている用途
- ハンドメイドや雑貨ブランドの申込・送信ボタン
- 絵本・キッズ系サイトの柔らかな CTA
- 温かみや素朴さを演出したいキャンペーン LP
縫い目の見え方は dashed の太さと色、outline-offset の値で調整できます。オフセットを深くすると内側のラインが中央寄りになり、縫い代の幅が変わります。背景の #B5651D とホバー時の #8E4F17 を変えれば布の色味を一新できます。破線だけでは状態が伝わりにくいので、フォーカス時にも分かる視覚変化を加えるとアクセシビリティが向上します。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
縫い目の見た目を細かくしたり変えたりできますか
縫い目は border の dashed で描いています。border の太さや色を変えると糸の印象が変わり、内側の outline と outline-offset（初期値 -6px）を調整すると縫い代の幅が変えられます。offset を深くすると内側のラインが中央寄りになります。
布の色を変えたいです
背景の #B5651D とホバー時の #8E4F17、白い破線の色を差し替えれば布の色味を一新できます。地の色と破線のコントラストを保つと、縫い目がはっきり見えてクラフト感が引き立ちます。