CSSボタン・矢印ジェネレーターとは？画像を使わずに矢印とボタンを作る
「詳しくはこちら →」のようなリンクやボタンに付ける矢印を、画像やアイコンフォントを使わずに CSS だけで作るツールです。矢印は、くの字・三角形・棒付き・二重・丸や四角の背景付きなど20種類から選べ、向き（上下左右）、テキストとの位置、大きさ、線の太さを調整できます。 「ボタン化する」をオンにすると、矢印とテキストを包んだボタンになり、色・枠線・角丸・余白・影・ホバー時の動きを設定できます。ボタンの着せ替えプリセットは20種類です。できたコードは HTML と CSS に分けてコピーでき、プレビューを PNG・WebP・SVG で保存することもできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 矢印の形を決める。タイプ・向き・配置を選び、大きさや線の太さを調整します。表示テキストを空欄にすると、矢印だけになります。
- ボタンにするなら「ボタン化する」をオンにする。着せ替えプリセットから近いものを選び、色・角丸・余白・影・ホバーアクションを整えます。
- HTML と CSS をコピーする。「HTML Code」と「CSS Code」の Copy ボタンを押して貼り付けます。ボタンは
<a href="#" class="custom-btn">の形で出力されるので、hrefをリンク先の URL に書き換えてください。
矢印は <span class="arrow"> の疑似要素（::before・::after）に枠線や三角形を描き、transform: rotate() で向きを変えています。Web フォントを選んだときは、CSS の先頭に @import の行が入ります。
ブラウザ対応
| ブラウザ | transform（矢印の向き） |
gap（テキストとの間隔） |
|---|---|---|
| Chrome・Edge | Chrome 36 以降・Edge 12 以降 | Chrome・Edge 84 以降 |
| Safari（Mac・iPhone） | 9 以降 | Mac 14.1 以降・iPhone 14.5 以降 |
| Firefox | 16 以降 | 63 以降 |
gap はフレックスボックスの中で使う場合の対応バージョンです。出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
出力される HTML のリンク先が
href="#" になっているためです。# を移動させたいページの URL に書き換えてください。
フォームの送信など、ページを移動しないボタンにしたいときは、<a> を <button type="button"> に変え、クラス名 custom-btn はそのまま使います。
できます。「ボタン化する」をオフにし、表示テキストを空欄にすると、
<span class="arrow"></span> だけが出力されます。
見出しの横やリストの頭など、置きたい場所にこの1行を入れて使います。このときの矢印の色は「カラー (Color)」で決めます（ボタン化したときは、ボタン設定の「文字・矢印色」が使われます）。
三角形やブロック矢印のように、線ではなく塗りつぶしで描く形だからです。三角形・二重三角形・ブロック矢印・丸背景＋三角形・四角背景＋三角形を選ぶと、線の太さの設定は使えなくなります。大きさで調整してください。
CSS は1回だけ貼り、HTML を必要な数だけ置きます。クラス名（
custom-btn・arrow）が同じなら、どのボタンにも同じ見た目が付きます。
色違いのボタンを並べたいときは、CSS のクラス名を書き換えて別々に貼ってください。