右矢印を入れたボタン14選

右矢印のアイコンが付いたボタンって、どうやって作るんですか？

矢印は「次へ」「続き」を直感的に伝えられるよ。アイコンにはFontAwesomeを使うと便利だし、CSSでホバーアニメーションを加えれば、より魅力的なボタンになる。ここでは、右矢印アイコンを使った14種類の動きを作って、デザインと実装のコツを身につけよう。

14種類の右矢印アイコンボタン

1. シンプル黒丸角ボタン

黒い丸みのあるカプセル型ボタンです。ホバーで右端の矢印が少しだけ右にスライドします。

HTML

<button class="btn-arrow-solid">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-arrow-right"></i>
</button>

CSS

.btn-arrow-solid {
	position: relative;
	padding: 15px 40px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #333;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-arrow-solid .arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

.btn-arrow-solid:hover {
	background: #555;
}

/* 右にゆっくり移動 */
.btn-arrow-solid:hover .arrow {
	right: 15px;
}

AIへのプロンプト例

以下のように依頼します：

button要素を使用して、シンプルで力強い印象のカプセル型ボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 黒い背景に白い文字
- 角の丸いカプセル型
- 右端にシンプルな右矢印（棒あり）アイコンを配置

## ホバー時
- 背景が少し明るくなる
- 右矢印がわずかに右へスライドして動きを示す

このボタンの特徴

シンプルな動き 矢印が右にスライドする基本的なアニメーション
カプセル型の形状 丸みを帯びた柔らかい印象で親しみやすい
単色背景 黒背景に白文字で視認性が高く、どんなデザインにも合わせやすい
用途「次へ」「続きを読む」など、進行方向を示すボタンに最適

コードのポイント

矢印の配置と移動:

CSS

.btn-arrow-solid .arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.btn-arrow-solid:hover .arrow {
    right: 15px; /* ホバー時に5px右に移動 */
}

position: absoluteで矢印を右端に固定配置
top: 50%とtransform: translateY(-50%)で垂直方向の中央配置
ホバー時にrightの値を変更して右へスライド
transitionで滑らかな移動を実現

2. ブルーグレー下線ボタン

白背景に黒枠、下側に淡いブルーグレーの帯（下線風）をもつデザインです。ホバーで矢印が小刻みに2回右に動きます。

HTML

<button class="btn-arrow-underline">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-circle-arrow-right"></i>
</button>

CSS

.btn-arrow-underline {
	position: relative;
	padding: 15px 40px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: #fff;
	border: 3px solid #333;
	border-radius: 0;
	box-shadow: inset 0 -8px 0 #B8D8D8;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-arrow-underline .arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
}

@keyframes doubleMove {
	0%, 100% { right: 10px; }
	25% { right: 5px; }
	50% { right: 10px; }
	75% { right: 5px; }
}

/* 右に2回細かく移動 */
.btn-arrow-underline:hover .arrow {
	animation: doubleMove 0.6s ease;
}

AIへのプロンプト例

button要素を使用して、下側に淡い帯が入った上品なボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 白背景に黒い枠線
- 下側に淡い青灰色の下線風アクセント
- 右端に丸い枠で囲まれた右矢印アイコンを配置

## ホバー時
- 矢印が小刻みに2回右へ動いてクリック可能性を伝える

このボタンの特徴

下線風アクセント 内側の影を使った独特のデザイン
複数回の移動 矢印が2回小刻みに動いてアテンションを引く
上品な配色 白背景に黒枠、淡いブルーグレーの帯でフォーマルな印象
用途フォーム送信や重要な操作の確認ボタンに適している

コードのポイント

キーフレームアニメーション:

CSS

@keyframes doubleMove {
    0%, 100% { right: 10px; }
    25% { right: 5px; }
    50% { right: 10px; }
    75% { right: 5px; }
}

.btn-arrow-underline:hover .arrow {
    animation: doubleMove 0.6s ease;
}

@keyframesで2回の移動パターンを定義
0%→25%→50%→75%→100%で位置を変化させる
ホバー時にanimationプロパティでアニメーションを再生
box-shadow: insetで内側に影を配置し、下線風のアクセントを実現

3. シンプル黒枠ボタン

黒い実線枠のベーシックなボタンです。ホバーで矢印が一回転します。

HTML

<button class="btn-arrow-outline">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-angles-right"></i>
</button>

CSS

.btn-arrow-outline {
	position: relative;
	padding: 15px 40px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: #fff;
	border: 2px solid #333;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-arrow-outline .arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

.btn-arrow-outline:hover {
	background: #f5f5f5;
}

/* 一回転 */
.btn-arrow-outline:hover .arrow {
	transform: translateY(-50%) rotate(360deg);
}

AIへのプロンプト例

button要素を使用して、枠線のみのシンプルなボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 白背景に黒い実線の枠
- 文字は黒
- 右端に二重の右矢印のアイコンを配置

## ホバー時
- 背景が少し明るくなる
- 矢印が一回転して動きを示す

このボタンの特徴

回転アニメーション 矢印が360度回転してダイナミックな動き
ベーシックな枠線 黒い実線枠でどんなデザインにもマッチ
二重矢印アイコン 進行方向をより強調したデザイン
用途シンプルで汎用性が高く、様々な場面で使える基本ボタン

コードのポイント

回転と中央配置の両立:

CSS

.btn-arrow-outline .arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.btn-arrow-outline:hover .arrow {
    transform: translateY(-50%) rotate(360deg);
}

transformに複数の値を指定して、中央配置と回転を同時に適用
translateY(-50%)で垂直中央を維持したままrotate(360deg)で回転
トランスフォームの順序は重要：中央配置→回転の順で記述
transition: allで回転も滑らかにアニメーション

4. 破線枠ボタン

黒い破線枠でカジュアルな印象のボタンです。ホバーで矢印が点滅します。

HTML

<button class="btn-arrow-dashed">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid  fa-chevron-right"></i>
</button>

CSS

.btn-arrow-dashed {
	position: relative;
	padding: 15px 45px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: #fff;
	border: 2px dashed #333;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-arrow-dashed .arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
	50% { opacity: 1; }
}

.btn-arrow-dashed:hover {
	background: #fafafa;
}

/* 消えて表示を2回繰り返す */
.btn-arrow-dashed:hover .arrow {
	animation: blink 0.8s ease;
}

AIへのプロンプト例

button要素を使用して、カジュアルで親しみやすい印象のボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 白背景に黒の破線枠
- 右端にシンプルな右矢印（棒なし）アイコンを配置

## ホバー時
- 矢印が点滅してアテンションを与える

このボタンの特徴

点滅＋移動 矢印が明滅しながらスライドする目を引く動き
破線の枠線 border-style: dashedでカジュアルな印象
注目度が高い アニメーションが派手で重要なアクションに最適
用途キャンペーンボタンや限定オファーなど、強い訴求が必要な場面

コードのポイント

点滅と移動を組み合わせたキーフレーム:

CSS

@keyframes blink {
    0%, 100% { opacity: 1; right: 20px; }
    25% { opacity: 0; right: 30px; }
    50% { opacity: 1; right: 40px; }
    75% { opacity: 0; right: 30px; }
}

.btn-arrow-dashed:hover .arrow {
    animation: blink 0.8s ease-in-out;
}

opacityとrightを同時にアニメーションして複雑な動きを実現
0%/100%で元の位置、25%/75%で透明、50%で最も右に移動
ease-in-outでスムーズな加速・減速を表現
点滅パターンは4段階で視覚的なリズムを作る

5. 黒タグ型ボタン

黒タグ型ボタンタグ型のシルエットを持つ黒背景のボタンです。ホバーで矢印が一度右に飛び出して戻ります。

HTML

<button class="btn-arrow-tag">
	<span class="text">BUTTON</span>
	<i class="arrow-shape fa-solid fa-caret-right"></i>
</button>

CSS

.btn-arrow-tag {
	position: relative;
	padding: 15px 50px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #333;
	border: none;
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-tag .arrow-shape {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
}

@keyframes flyOut {
	50% { right: -20px; }
	100% { right: 20px; }
}

.btn-arrow-tag:hover {
	transform: translateX(5px);
}

/* 右に飛び出て左から入ってくる */
.btn-arrow-tag:hover .arrow-shape {
	animation: flyOut 0.8s ease;
}

AIへのプロンプト例

button要素を使用して、タグのような切り欠きシルエットのボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 黒背景に白文字
- 右側が矢印形に切り欠かれた見た目
- 右端に三角形で塗りつぶした右矢印アイコンを配置

## ホバー時
- ボタンがわずかに右へ動き、矢印が一度右へ飛び出して戻る

このボタンの特徴

飛び出すアニメーション 矢印がボタンの外へ飛び出す大胆な動き
タグ型の形状 clip-pathで右側に三角形の突起を作った特徴的なデザイン
強い印象 従来のボタンにはない個性的なシルエット
用途ブランディングが重要なサイトや、印象に残したいCTAボタン

コードのポイント

clip-pathで作るタグ型シェイプ:

CSS

.btn-arrow-tag {
    clip-path: polygon(
        0 0, 
        calc(100% - 12px) 0, 
        100% 50%, 
        calc(100% - 12px) 100%, 
        0 100%
    );
}

@keyframes flyOut {
    0% { right: 20px; opacity: 1; }
    100% { right: -30px; opacity: 0; }
}

clip-path: polygon()で5つの座標点を指定して切り抜き
右側の2点で三角形の突起を形成（中央50%位置がポイント）
calc(100% - 12px)で三角形の大きさを調整
flyOutアニメーションで矢印をボタンの外（負の値）へ移動

6. ブルーグレー円形アイコンボタン

右端に円形で背景色の付いた矢印アイコンを備えたボタンです。ホバーでアイコンが少し右にスライドします。

HTML

<button class="btn-arrow-circle">
	<span class="text">BUTTON</span>
	<i class="arrow-icon fa-solid fa-arrow-right-long"></i>
</button>

CSS

.btn-arrow-circle {
	position: relative;
	padding: 15px 60px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: transparent;
	border: 2px solid #333;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-circle .arrow-icon {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: #B8D8D8;
	color: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.3s ease;
}

.btn-arrow-circle:hover .arrow-icon {
	right: 15px;
	background: #B1D1D1;
}

AIへのプロンプト例

button要素を使用して、右端に円形の右矢印アイコンが付いたボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 白に近い印象の落ち着いた配色
- 右端に円形のアイコン領域をCSSで作り、中にシンプルな右矢印アイコンを配置

## ホバー時
- 円形アイコンが少し右に移動して反応を示す
- アイコンの背景色が少しだけ変化

このボタンの特徴

円形アイコン背景 矢印の背後に丸い背景色を配置してアイコン感を強調
上品なブルーグレー 落ち着いた配色で信頼感を演出
スライドアニメーション シンプルな右移動で洗練された印象
用途ビジネスサイトやコーポレートサイトなど、プロフェッショナルな場面

コードのポイント

疑似要素で円形背景を作成:

CSS

.arrow {
    position: relative;
    padding: 8px;
}

.arrow::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #90a4ae;
    border-radius: 50%;
    left: 0;
    top: 0;
    z-index: -1;
}

position: relativeで基準点を設定し、内部に疑似要素を配置
::beforeで円形背景を作成（border-radius: 50%）
z-index: -1で矢印アイコンの背後に配置
padding: 8pxでアイコンと背景の間にスペースを確保
矢印全体がスライドする際、背景も一緒に移動

7. 黒ドット枠ボタン

黒背景に白ドットの枠線を持つボタンです。ホバーで矢印が小刻みに2回右に動きます。

HTML

<button class="btn-arrow-dotted">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-arrow-right"></i>
</button>

CSS

.btn-arrow-dotted {
	position: relative;
	padding: 15px 40px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #333;
	border: 3px dotted #fff;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-dotted .arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
}

@keyframes doubleMove8 {
	0%, 100% { right: 20px; }
	25% { right: 17px; }
	50% { right: 20px; }
	75% { right: 15px; }
}

.btn-arrow-dotted:hover {
	background: #444;
}

/* 右に2回細かく移動 */
.btn-arrow-dotted:hover .arrow {
	animation: doubleMove8 0.6s ease;
}

AIへのプロンプト例

button要素を使用して、黒背景に白いドット枠のボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 黒に白いドットの枠線
- 右端にシンプルな右矢印（棒あり）アイコンを配置

## ホバー時
- 背景がわずかに濃くなり、矢印が小刻みに2回右へ動く

このボタンの特徴

ドット枠線 border-style: dottedで親しみやすい雰囲気
複雑な移動パターン 矢印が左右に8回細かく動く独特なアニメーション
リズミカルな動き 小刻みな動きで視線を引きつける
用途カジュアルなサイトやエンタメ系コンテンツに最適

コードのポイント

多段階キーフレームで細かい動き:

CSS

@keyframes doubleMove8 {
    0%, 100% { right: 20px; }
    12.5% { right: 25px; }
    25% { right: 20px; }
    37.5% { right: 25px; }
    50% { right: 20px; }
    62.5% { right: 25px; }
    75% { right: 20px; }
    87.5% { right: 25px; }
}

.btn-arrow-dotted:hover .arrow {
    animation: doubleMove8 0.8s ease-in-out;
}

8段階（12.5%刻み）で細かく位置を変化させて連続移動
奇数段階（12.5%, 37.5%, 62.5%, 87.5%）で右へ、偶数段階で元の位置へ
ease-in-outで各移動に緩急をつけて自然な動きに
0.8秒で8回の動きを実現し、テンポ感のあるアニメーション

8. グレーシャドウ丸角ボタン

柔らかいグレー背景と影で立体感のあるボタンです。ホバーでボタンが少し浮き、矢印が一回転します。

HTML

<button class="btn-arrow-shadow">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid  fa-chevron-right"></i>
</button>

CSS

.btn-arrow-shadow {
	position: relative;
	padding: 15px 40px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: #f5f5f5;
  border: none;
	border-radius: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-shadow .arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

.btn-arrow-shadow:hover {
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

/* 一回転 */
.btn-arrow-shadow:hover .arrow {
	transform: translateY(-50%) rotate(360deg);
}

AIへのプロンプト例

button要素を使用して、柔らかいグレーと影で立体感のあるボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 明るいグレーの背景
- 角は丸く、やさしい印象
- 右端にシンプルな右矢印（棒なし）アイコンを配置

## ホバー時
- ボタンがわずかに持ち上がるように浮き、矢印が一回転する

このボタンの特徴

浮き上がる効果 ホバー時に影が濃くなり、ボタンが持ち上がったように見える
回転アニメーション 矢印が360度回転して動きを追加
丸角とシャドウ border-radiusとbox-shadowで柔らかい印象
用途モダンなUIデザインや、フラットデザインのアクセントに

コードのポイント

box-shadowの変化で奥行き感:

CSS

.btn-arrow-shadow {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-arrow-shadow:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-arrow-shadow:hover .arrow {
    transform: translateY(-50%) rotate(360deg);
}

box-shadowの縦オフセット（2px→4px）とぼかし（5px→12px）を増やして浮遊感
不透明度（0.1→0.2）を上げて影を濃く
transform: translateY(-2px)でボタン全体を上に移動
矢印の回転と組み合わせて立体的な動きを演出

9. 上下ライン矢印ボタン

上下に細い線だけを引いたミニマルなボタンです。ホバーで矢印が拡大します。

HTML

<button class="btn-arrow-lines">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-right-long"></i>
</button>

CSS

.btn-arrow-lines {
	position: relative;
	padding: 15px 40px 15px 10px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: transparent;
  border: none;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-lines .arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

/* 拡大 */
.btn-arrow-lines:hover .arrow {
	transform: translateY(-50%) scale(1.3);
}

AIへのプロンプト例

button要素を使用して、上下にラインだけがあるミニマルなボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 背景は透明に近い印象
- 上下だけに黒い細いライン
- 右端にシンプルな右矢印（棒あり）アイコンを配置

## ホバー時
- 矢印が少し大きくなり、反応が分かりやすくなる

このボタンの特徴

上下線だけのミニマル border-topとborder-bottomのみでシンプルに
拡大アニメーション 矢印が1.2倍に拡大して存在感を増す
すっきりしたデザイン 縦線がない分、テキストが際立つ
用途テキスト重視のボタンや、ナビゲーションリンクに適用

コードのポイント

一部のborderだけ指定:

CSS

.btn-arrow-lines {
    border: none;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    border-radius: 0;
}

.btn-arrow-lines:hover .arrow {
    transform: translateY(-50%) scale(1.2);
}

border: noneでデフォルトの枠線をリセット
border-topとborder-bottomだけ個別に指定
border-radius: 0で角を削除し、直線的なデザインに
scale(1.2)で矢印を拡大し、translateY(-50%)との組み合わせで中央を維持
シンプルながら視覚的なインパクトを与える

10. ブルーグレー丸角ボタン

淡いブルーグレーの塗りつぶしと丸い形状のボタンです。ホバーで背景と影が変化し、矢印が右へスライドします。

HTML

<button class="btn-arrow-filled">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-arrow-right"></i>
</button>

CSS

.btn-arrow-filled {
	position: relative;
	padding: 16px 45px 16px 35px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: #B8D8D8;
  border: none;
	border-radius: 50px;
	box-shadow: 0 4px 12px rgba(184, 216, 216, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-filled .arrow {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

.btn-arrow-filled:hover {
	background: #A0C8C8;
	box-shadow: 0 6px 16px rgba(184, 216, 216, 0.4);
}

.btn-arrow-filled:hover .arrow {
	right: 17px;
}

AIへのプロンプト例

button要素を使用して、淡い青灰色で柔らかな丸角のボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 落ち着いた青灰の塗りつぶし
- 丸いカプセル型
- 右端にシンプルな右矢印（棒あり）アイコンを配置

## ホバー時
- 背景がわずかに濃くなり、影が少し強くなる
- 矢印が少し右へスライド

このボタンの特徴

塗りつぶし背景 background-colorで全体をブルーグレーに
影の変化 ホバー時にbox-shadowが濃くなり立体感が増す
丸角デザイン border-radiusで柔らかく親しみやすい印象
用途プライマリーボタンやメインCTAとして最適

コードのポイント

背景色と影の組み合わせ:

CSS

.btn-arrow-filled {
    background-color: #90a4ae;
    color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-arrow-filled:hover {
    background-color: #78909c;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

background-colorで塗りつぶし、color: whiteで白文字に
border: noneで枠線を削除し、背景色だけで表現
ホバー時に背景色を少し暗く（#90a4ae→#78909c）して押下感
box-shadowの変化で浮き上がる効果を追加
transitionで全ての変化を滑らかにアニメーション

11. ブルーグレー枠線丸角ボタン

淡いブルーグレーの枠線で構成された丸角ボタンです。ホバーで背景が淡く付き、矢印が右へスライドします。

HTML

<button class="btn-arrow-bordered">
	<span class="text">BUTTON</span>
	<i class="arrow fa-solid fa-chevron-right"></i>
</button>

CSS

.btn-arrow-bordered {
	position: relative;
	padding: 16px 45px 16px 35px;
	font-size: 16px;
	font-weight: 600;
	color: #6B9494;
	background: #fff;
	border: 2px solid #B8D8D8;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-bordered .arrow {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	transition: all 0.3s ease;
}

.btn-arrow-bordered:hover {
	background: #F0F8F8;
}

.btn-arrow-bordered:hover .arrow {
	right: 17px;
}

AIへのプロンプト例

button要素を使用して、淡い青灰の枠線で構成された丸角のボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 白背景に落ち着いた青灰色の枠線
- 丸いカプセル型
- 右端にシンプルな右矢印（棒あり）アイコンを配置

## ホバー時
- 背景にごく薄い色がのり、矢印が少しだけ右に移動

このボタンの特徴

枠線スタイル borderだけで背景色なしのアウトライン型
微妙な背景変化 ホバー時に薄いグレー背景が出現して視覚的フィードバック
上品なブルーグレー 落ち着いた色味で幅広いデザインに対応
用途セカンダリーボタンやサブアクションに適用

コードのポイント

枠線と背景の切り替え:

CSS

.btn-arrow-bordered {
    background-color: transparent;
    color: #90a4ae;
    border: 2px solid #90a4ae;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-arrow-bordered:hover {
    background-color: #eceff1;
    color: #78909c;
    border-color: #78909c;
}

background-color: transparentで初期状態は透明
borderとcolorを同じ色にして統一感のあるアウトライン
ホバー時にbackground-colorを薄いグレー（#eceff1）に変更
border-colorとcolorも少し暗くして押下感を演出
塗りつぶしボタンより控えめで、階層構造を表現可能

12. ドット＋黒円形アイコンボタン

左側に小さなドット、右端に黒い円形アイコンを配置したボタンです。ホバーでアイコンの背景が青灰色に変化します。

HTML

<button class="btn-arrow-dot-icon">
	<span class="dot"></span>
	<span class="text">BUTTON</span>
	<i class="arrow-icon fa-solid fa-caret-right"></i>
</button>

CSS

.btn-arrow-dot-icon {
	position: relative;
	padding: 12px 50px 12px 35px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	background: transparent;
  border: none;
	border-bottom: 2px solid #333;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-arrow-dot-icon .dot {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #B8D8D8;
	border-radius: 50%;
}


.btn-arrow-dot-icon .arrow-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: #333;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.3s ease;
}


.btn-arrow-dot-icon:hover .arrow-icon {
	color:#333;
	background-color: #B8D8D8;
}

AIへのプロンプト例

button要素を使用して、左に小さなドット、右端に円形の矢印アイコンを配置したボタンを作成してください。

## アイコン
- FontAwesomeのアイコンを使用

## 初期状態
- 背景は白に近い印象で落ち着いた配色
- 左側に小さな青灰色のドット
- 右端に黒い円形アイコンをCSSで作り、中に三角形で塗られたアイコンを配置

## ホバー時
- 右端の円形アイコンの背景が青灰色に変わり、文字色は落ち着いた濃色へ

このボタンの特徴

複合デザイン 左側のドットと右側の円形アイコンで視覚的バランス
下線のアクセント border-bottomだけでシンプルながら洗練された印象
色の変化 矢印背景がホバー時に黒→ブルーグレーに変化
用途ナビゲーションリンクやカテゴリーボタンなど、複数配置する場面

コードのポイント

左右の装飾要素配置:

CSS

.btn-arrow-dot-icon .dot {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #B8D8D8;
    border-radius: 50%;
}

.btn-arrow-dot-icon .arrow-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 50%;
}

.btn-arrow-dot-icon:hover .arrow-icon {
    color: #333;
    background-color: #B8D8D8;
}

左側のドットと右側の円形アイコンをそれぞれposition: absoluteで配置
両方ともtop: 50%とtransform: translateY(-50%)で垂直中央揃え
ドットはborder-radius: 50%で正円に（width/heightが同じ）
円形アイコンはdisplay: flexで内部のアイコンを中央配置
ホバー時に背景色だけ変化させ、統一感のある視覚効果

13. シンプル枠線矢印ボタン

黒い枠線だけのミニマルなボタンです。矢印はCSSで作成し、ホバーで右にスライドします。

HTML

<button class="btn-arrow-simple">
	<span class="text">ボタン</span>
	<span class="arrow"></span>
</button>

CSS

.btn-arrow-simple {
    position: relative;
    padding: 14px 50px 14px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-arrow-simple .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 25px;
    height: 2px;
    background: #333;
    transition: all 0.3s ease;
}

.btn-arrow-simple .arrow::before {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    width: 12px;
    height: 2px;
    background: #333;
    transform: rotate(45deg);
}

.btn-arrow-simple:hover .arrow {
    right: 5px;
}

AIへのプロンプト例

button要素を使用して、シンプルでミニマルな印象のボタンを作成してください。

## アイコン
- CSSで右向き矢印を作成
- 細い横線と左上に向かう斜め線1本で構成
- 下側の斜め線は作らず、「レ」を左に90度回転させたような形状

## 初期状態
- 白背景に黒い枠線
- 黒い文字
- わずかに角丸
- 右端に右向き矢印を配置

## ホバー時
- 横棒の幅が広がり、矢印が右にスライドする

このボタンの特徴

シンプルなCSS矢印 水平バーと上側の斜め線1本だけで構成された軽量な矢印
スライド＋伸縮効果 ホバー時に矢印が右へ移動し、横棒も伸びる
クリーンな印象 白黒のコントラストですっきりとした見た目
用途あらゆる場面で使える汎用的なボタン

コードのポイント

CSSで上向き斜め線1本の矢印を作成:

CSS

.btn-arrow-simple .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 25px; /* 横棒の長さ */
    height: 2px; /* 横棒の太さ */
    background: #333; /* 横棒の色 */
    transition: all 0.3s ease;
}

.btn-arrow-simple .arrow::before {
    content: '';
    position: absolute;
    right: -1px; /* 横棒の右端よりわずかに外側 */
    top: -4px; /* 横棒の上側に配置 */
    width: 12px; /* 斜め線の長さ */
    height: 2px; /* 斜め線の太さ */
    background: #333; /* 斜め線も背景色で表現 */
    transform: rotate(45deg); /* 45度回転で右上向きに */
}

.btn-arrow-simple:hover .arrow {
    right: 5px; /* 右に5pxスライド */
    width: 30px; /* 横棒が5px伸びる */
}

横棒（.arrow）をbackgroundで作成し、width: 25pxとheight: 2pxでサイズ調整
::before疑似要素で矢印の先端（上側の斜め線のみ）を作成
実装のポイント 下側の斜め線は作成しないため、::after疑似要素は不要
上側の斜め線をright: -1px（横棒の右端より外側）、top: -4px（上側）に配置
width: 12px、height: 2pxの細い線をrotate(45deg)で右上向きに回転
ホバー時はrightを変更（10px→5px）して右へスライドし、widthを増やして横棒を伸ばす
この手法なら疑似要素1つだけで矢印を表現でき、シンプルで軽量
FontAwesomeなどのアイコンライブラリ不要でパフォーマンスに優れる

14. カプセル型影付きボタン

右と下に影を配置した立体的なカプセル型ボタンです。矢印はCSSで作成し、ホバーで拡大、クリックで沈み込みます。

HTML

<button class="btn-arrow-capsule">
	<span class="text">ボタン</span>
	<span class="arrow"></span>
</button>

CSS

.btn-arrow-capsule {
    position: relative;
    padding: 14px 50px 14px 28px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    border-radius: 50px;
    box-shadow: 4px 4px 0 #333;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-arrow-capsule .arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 25px;
    height: 2px;
    background: #333;
    transition: all 0.15s ease;
}

.btn-arrow-capsule .arrow::before {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 2px;
    background: #333;
    transform: rotate(45deg);
}

.btn-arrow-capsule:hover .arrow {
    transform: scale(1.2);
}

.btn-arrow-capsule:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #333;
}

AIへのプロンプト例

button要素を使用して、立体感のあるカプセル型のボタンを作成してください。

## アイコン
- CSSで右向き矢印を作成
- 細い横線と左上に向かう斜め線1本で構成
- 下側の斜め線は作らず、「レ」を左に90度回転させたような形状

## 初期状態
- 白背景に黒い枠線
- 完全に丸いカプセル型
- 右と下に硬い影（ぼかしのない影）を配置して立体感を演出
- 右端に右向き矢印を配置

## ホバー時
- 矢印全体が少し拡大する

## クリック時
- ボタン全体が右下に移動
- 影が完全に消えて押し込まれた状態

このボタンの特徴

カプセル型デザイン 完全な丸角でやさしい印象
硬い影 右と下にぼかしのない影で立体感を強調
シンプルなCSS矢印 水平バーと上側の斜め線1本だけで構成された軽量な矢印
拡大アニメーション ホバー時に矢印全体が1.2倍に拡大するインタラクション
押し込む動き クリック時にボタンが影の位置まで移動して沈む

コードのポイント

硬い影と押し込みアニメーション、上向き斜め線1本の矢印拡大:

CSS

.btn-arrow-capsule {
    border-radius: 50px; /* カプセル型 */
    box-shadow: 4px 4px 0 #333; /* 右4px、下4px、ぼかし0の硬い影 */
    transition: all 0.15s ease;
}

.btn-arrow-capsule .arrow {
    width: 25px; /* 水平バーの長さ */
    height: 2px; /* 水平バーの太さ */
    background: #333; /* 水平バーを背景色で表現 */
    transition: all 0.15s ease;
}

.btn-arrow-capsule .arrow::before {
    content: '';
    position: absolute;
    right: 0; /* 水平バーの右端に配置 */
    top: -3px; /* 水平バーの上側に配置 */
    width: 8px; /* 斜め線の長さ */
    height: 2px; /* 斜め線の太さ */
    background: #333; /* 斜め線も背景色で表現 */
    transform: rotate(45deg); /* 45度回転で右上向きに */
}

.btn-arrow-capsule:hover .arrow {
    transform: scale(1.2); /* 矢印全体を1.2倍に拡大 */
}

.btn-arrow-capsule:active {
    transform: translate(4px, 4px); /* ボタンを右下に移動 */
    box-shadow: 0 0 0 #333; /* 影を消す */
}

box-shadowの3番目の値を0にして、ぼかしのない硬い影を作成
.arrow要素でbackgroundを使い水平バーを作成（幅25px、高さ2px）
::before疑似要素で矢印の先端（上側の斜め線のみ）を作成
実装のポイント 下側の斜め線は作成しないため、::after疑似要素は不要
上側の斜め線をright: 0（横棒の右端）、top: -3px（上側）に配置
width: 8px、height: 2pxの細い線をrotate(45deg)で右上向きに回転
ホバー時はscale(1.2)で矢印全体を拡大（水平バーと斜め線が一緒に拡大）
:activeでtransform: translate(4px, 4px)により影の位置へ移動
影を0 0 0にすることで完全に消し、押し込まれた状態を表現
transitionを0.15秒と短くして、素早いレスポンスを実現
この手法なら疑似要素1つだけで矢印を表現でき、シンプルで軽量

まとめ

右矢印ボタンって、同じ矢印アイコンでもアニメーションの種類でこんなに印象が変わるんだね。

そうなんだ。移動・回転・点滅・拡大といった動きの組み合わせで、シンプルからダイナミックまで幅広く表現できるよ。

枠線のスタイルや背景の有無でも、雰囲気が全然違うね。ドットや破線を使うとカジュアルになるし。

その通り。矢印ボタンの設計では、デザインの印象とアニメーションの強さのバランスが大切なんだ。目的に応じて使い分けよう。

右矢印ボタン実装の重要ポイント

絶対配置が基本 position: absoluteで右側に固定し、top: 50%とtransform: translateY(-50%)で垂直中央に配置
アニメーション技法の選択 シンプルな移動（right値変更）、回転（rotate）、点滅（opacity）、拡大（scale）を目的に応じて組み合わせる
枠線スタイルで印象調整 実線（フォーマル）、破線（カジュアル）、ドット（親しみやすい）、なし（ミニマル）を使い分け
背景とアイコンの関係 透明背景・塗りつぶし・枠線のみの3パターンで階層を表現し、円形背景で矢印を強調する技法も有効
キーフレームで複雑な動き @keyframesを使えば、点滅＋移動や連続移動などリッチなアニメーションを実現
transitionの調整 0.3〜0.8秒の範囲で自然な操作感を保ち、ease-in-outで緩急をつける
視線誘導の目的を意識 派手な動きが目的ではなく、ユーザーが「押しやすい」「次に進める」と感じることが最重要

14種類の右矢印アイコンボタン

1. シンプル黒丸角ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

矢印の配置と移動:

2. ブルーグレー下線ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

キーフレームアニメーション:

3. シンプル黒枠ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

回転と中央配置の両立:

4. 破線枠ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

点滅と移動を組み合わせたキーフレーム:

5. 黒タグ型ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

clip-pathで作るタグ型シェイプ:

6. ブルーグレー円形アイコンボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

疑似要素で円形背景を作成:

7. 黒ドット枠ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

多段階キーフレームで細かい動き:

8. グレーシャドウ丸角ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

box-shadowの変化で奥行き感:

9. 上下ライン矢印ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

一部のborderだけ指定:

10. ブルーグレー丸角ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

背景色と影の組み合わせ:

11. ブルーグレー枠線丸角ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

枠線と背景の切り替え:

12. ドット＋黒円形アイコンボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

左右の装飾要素配置:

13. シンプル枠線矢印ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

CSSで上向き斜め線1本の矢印を作成:

14. カプセル型影付きボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

硬い影と押し込みアニメーション、上向き斜め線1本の矢印拡大:

まとめ

学習チェック