コーディングではボタンを作ることが多いですが、ボタン内に矢印があるケースも多いと思います。
そこで今回は、
- 通常の矢印
- 三角形の矢印
- 画像の矢印
以上の3つと、それに対して、
- hoverしたら色を反転
- hoverしたら矢印を移動
という実装をご紹介していきます。
つまり、全部で9種類ご紹介していきます。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
ボタン内の矢印の作り方（9種類共通のコード）
まずは、9種類共通となるHTMLとCSSを解説します。
ちなみにHTMLは全て同じなので、この後の解説ではHTMLと共通のCSSは省略します。
HTMLのコード
<div class="btn">
<a href="#">ボタン</a>
</div>
CSSのコード
/* ボタンの共通CSS */
.btn {
margin-top: 30px;
text-align: center;
}
.btn a {
background-color: #2d96ff;
border: 1px solid #2d96ff;
border-radius: 50px;
color: #fff;
display: inline-block;
font-size: 20px;
padding: 20px;
position: relative;
text-decoration: none;
width: 380px;
}margin-topなどはデモで見やすくするためだけなので、実際に使うときは他も含めて適宜調整して下さい。
デモ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これをベースに、矢印を追加していきます。
ボタン内の矢印の作り方（通常の矢印）
まずは通常の矢印です。
通常の矢印とは、線が2本の『＞』という矢印です。
これ以降は、共通のCSSに追記するCSSだけを書いていきます。
CSSのコード
/* 通常の矢印 */
.btn a::before {
border-right: 3px solid #fff;
border-top: 3px solid #fff;
bottom: 0;
content: "";
height: 10px;
margin: auto;
position: absolute;
right: 40px;
top: 0;
transform: rotate(45deg);
width: 10px;
}
デモ
See the Pen
ボタン by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印の作り方（三角形の矢印）
次は三角形の矢印を作ります。
CSSのコード
/* 三角形の矢印(clip-path) */
.btn a::before {
background-color: #fff;
bottom: 0;
clip-path: polygon(0 0, 0 100%, 100% 50%);
content: "";
height: 20px;
margin: auto;
position: absolute;
right: 35px;
top: 0;
width: 15px;
}これはclip-pathを使った方法ですが、borderを使う方法もあります。
/* 三角形の矢印(border) */
.btn a::before {
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
border-top: 10px solid transparent;
bottom: 0;
content: "";
height: 0;
margin: auto;
position: absolute;
right: 35px;
top: 0;
}三角形の作り方は、以下の記事を参照下さい。
-
CSSで三角形を作る2つの方法(clip-path、border使用)
続きを見る
デモ
See the Pen
ボタン（通常の矢印） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印の作り方（画像の矢印）
次は画像の矢印を使います。
画像なので、矢印じゃなくてアイコンでも使えます。
CSSのコード
/* 画像が矢印 */
.btn a::before {
background-image: url(画像パス);
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
content: "";
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
width: 25px;
}
デモ
See the Pen
ボタン（三角形の矢印） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印をhoverしたら色を反転（通常の矢印）
次は、ボタンにカーソルを乗せたら、ボタンと矢印の色を反転させます。
CSSのコード
/* 通常の矢印(hoverで反転) */
.btn a {
transition: all .5s;
}
.btn a::before {
border-right: 3px solid #fff;
border-top: 3px solid #fff;
bottom: 0;
content: "";
height: 10px;
margin: auto;
position: absolute;
right: 40px;
top: 0;
transform: rotate(45deg);
transition: all .5s;
width: 10px;
}
.btn a:hover {
background-color: #fff;
color: #2d96ff;
}
.btn a:hover::before {
border-right: 3px solid #2d96ff;
border-top: 3px solid #2d96ff;
}ポイントは、transitionでじんわり変化させるところです。
あとは、hoverした後のbackground-color(背景色)・border(線)・color(フォントカラー)の色を指定します。
デモ
See the Pen
ボタン（通常の矢印） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印をhoverしたら色を反転（三角形の矢印）
これは、先ほどの通常の矢印と考え方は同じです。
CSSのコード
/* 矢印が三角(hoverで反転) */
.btn a {
transition: all .5s;
}
.btn a::before {
background-color: #fff;
bottom: 0;
clip-path: polygon(0 0, 0 100%, 100% 50%);
content: "";
height: 20px;
margin: auto;
position: absolute;
right: 35px;
top: 0;
transition: all .5s;
width: 15px;
}
.btn a:hover {
background-color: #fff;
color: #2d96ff;
}
.btn a:hover::before {
background-color: #2d96ff;
}
デモ
See the Pen
ボタン（三角形の矢印） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印をhoverしたら色を反転（画像の矢印）
これは画像なので、先ほどまでとはちょっとやり方が違います。
この場合は、反転前の画像と反転後の画像を用意します。
今回は、白い画像がhover前、青い画像がhover後になります。
そしてこれを瞬間的に入れ替えるなら、display: none;とdisplay: block;でもいいですが、じんわり変化させたいと思います。
それには、hover後の画像の上に、hover前の画像をピッタリ重ねます。
そしてopacityを使ってじんわり透過 or 出現させて入れ替えます。
CSSのコード
/* 矢印が画像(hoverで反転:画像2枚必要) */
.btn a {
transition: color .5s, background-color .5s;
}
.btn a::before,
.btn a::after {
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
content: "";
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
transition: opacity .5s;
width: 25px;
}
.btn a::before {
background-image: url(hover前の画像パス);
}
.btn a::after {
background-image: url(hover後の画像パス);
opacity: 0;
}
.btn a:hover {
background-color: #fff;
color: #2d96ff;
}
.btn a:hover::before {
opacity: 0;
}
.btn a:hover::after {
opacity: 1;
}
デモ
See the Pen
ボタン（画像の矢印） by junpei (@junpei-sugiyama)
on CodePen.
ちなみに、アイコンなどの画像を色を変えてダウンロードするには、『icooon-mono』というサイトが便利です。
-
【商用利用可】フリーアイコン素材サイト『icooon-mono』の使い方【色変更なども解説】
続きを見る
ボタン内の矢印をhoverしたら矢印を移動（通常の矢印）
次は、ボタンにカーソルを乗せたら矢印を右に少し動かして、外したら矢印が戻るようにします。
CSSのコード
/* 通常の矢印(hoverで矢印移動) */
.btn a::before {
border-right: 3px solid #fff;
border-top: 3px solid #fff;
bottom: 0;
content: "";
height: 10px;
margin: auto;
position: absolute;
right: 40px;
top: 0;
transform: rotate(45deg);
transition: right .5s;
width: 10px;
}
.btn a:hover::before {
right: 35px;
}右に動かすのはright: 35px;ですね。
元はright: 40px;なので、5px右に移動します。
あとはtransition: right .5s;でアニメーションを付けています。
デモ
See the Pen
ボタン（通常の矢印：hoverで色を反転） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印をhoverしたら矢印を移動（三角形の矢印）
これは、先ほどの通常の矢印と考え方は同じです。
CSSのコード
/* 矢印が画像(hoverで矢印移動) */
.btn a::before {
background-color: #fff;
bottom: 0;
clip-path: polygon(0 0, 0 100%, 100% 50%);
content: "";
height: 20px;
margin: auto;
position: absolute;
right: 35px;
top: 0;
transition: right .5s;
width: 15px;
}
.btn a:hover::before {
right: 30px;
}
デモ
See the Pen
ボタン（三角形の矢印：hoverで色を反転） by junpei (@junpei-sugiyama)
on CodePen.
ボタン内の矢印をhoverしたら矢印を移動（画像の矢印）
これは反転と違い、ただ移動するだけなので簡単です。
CSSのコード
/* 矢印が画像(hoverで矢印移動) */
.btn a::before {
background-image: url(画像パス);
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
content: "";
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
transition: right .5s;
width: 25px;
}
.btn a:hover::before {
right: 25px;
}
デモ
See the Pen
ボタン（画像の矢印：hoverで色を反転） by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、ボタン内の矢印に関する内容でした。
hoverのアニメーションも全てCSSのみなので簡単なものですが、こういったちょっとしたアニメーションが実務でもよく使われるので、ブクマしていつでもコピペできるようにしておくと便利かと思います。
以上になります。
