四角ブラケットフレームボタン
ブラケットフレームボタンは、四隅に置いた4つの <i> 要素で L 字の角飾りを作り、SF やゲーム UI のような照準枠の雰囲気を出します。各角は border の2辺だけを残し、不要な辺を border:none で消すことで L 字を形づくっています。
解説
ブラケットフレームボタンは、四隅に置いた4つの <i> 要素で L 字の角飾りを作り、SF やゲーム UI のような照準枠の雰囲気を出します。各角は border の2辺だけを残し、不要な辺を border:none で消すことで L 字を形づくっています。本体は背景透明・枠線なしで、等幅フォントとワイドな letter-spacing（.3em）がテクニカルな印象を強めます。ホバー時には文字色と角飾りの色が一緒に切り替わります。CSS のみで動作します。
こんな用途に
- ゲームやガジェット系サイトのアクションボタン
- ダーク基調のダッシュボードや管理画面
- 近未来・サイバーパンク調の LP の CTA
角飾りのサイズは .bk-c の width・height で、太さは border の値で調整できます。発光色 #3afff5 を変えればトーンを和風にもクールにも振れます。等幅フォントが世界観の要なので、本文フォントに統一したい場合は雰囲気が和らぐ点を踏まえて選んでください。色だけに頼らずホバー以外の状態変化も用意すると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
角の飾りを大きくしたり太くしたりできますか
角飾りは .bk-c の width と height でサイズを、border の太さ（初期値 2px）で線の太さを調整できます。4つの角はそれぞれ残す辺が違うので、border-color など共通プロパティを変えると4隅すべてに反映されます。
等幅フォントを別のフォントに変えても大丈夫ですか
変更は可能ですが、Courier New などの等幅フォントとワイドな字間がこのデザインのテクニカルな雰囲気を作っています。一般的なフォントにすると印象が柔らかくなるため、世界観を保ちたい場合は等幅系を維持するのがおすすめです。