画像を使わずCSSだけで矢印アイコンのボタンを作るメモ

矢印アイコンをcssでつくって、画像を使わずにボタンを作成するためのコードメモです。
ここでは、以下の通り、矢印のアイコンと、三角のアイコンのついたボタンのサンプルとコードをご用意しました。

サンプル

↓下記サンプルをクリックしてコードを確認してください。↓

右矢印ボタン 左矢印ボタン 右三角ボタン

右矢印ボタンのつくりかた

右端に矢印のアイコンのついたボタンの作り方です。

右矢印ボタン

HTML

<a class="btn-arrow-right">右矢印ボタン</a>

CSS

ボタンのデザインについては適宜変更してください。

.btn-arrow-right {
 position:relative;
 /* 以下はボタンのデザインです。適宜変更してください。 */
 display:block;
 width:280px;
 padding:20px 30px 20px 20px;
 text-align:center;
 background:#6495ed;
 color:#fff;
 border-radius:5px;
 margin:0 auto;
}

.btn-arrow-right:after {
 content: "";
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 margin-top: -4px;
 height: 8px;
 width: 8px;
 position: absolute;
 top: 50%;
 right: 20px;
 transform: rotate(45deg);
}

左矢印ボタンのつくりかた

左端に矢印のアイコンのついたボタンの作り方です。

左矢印ボタン

HTML

<a class="btn-arrow-left">左矢印ボタン</a>

CSS

ボタンのデザインについては適宜変更してください。

.btn-arrow-left {
 position:relative;
 /* 以下はボタンのデザインです。適宜変更してください。 */
 display:block;
 width:280px;
 padding:20px 20px 20px 30px;
 text-align:center;
 background:#6495ed;
 color:#fff;
 border-radius:5px;
 margin:0 auto;
}

.btn-arrow-left:after {
 content: "";
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 margin-top: -4px;
 height: 8px;
 width: 8px;
 position: absolute;
 top: 50%;
 left: 20px;
 transform: rotate(-135deg);
}

右三角ボタンのつくりかた

右端に三角のアイコンのついたボタンの作り方です。

右三角ボタン

HTML

<a class="btn-tri-right">右三角ボタン</a>

CSS

.btn-tri-right {
 position:relative;
 /* 以下はボタンのデザインです。適宜変更してください。 */
 display:block;
 width:280px;
 padding:20px 30px 20px 20px;
 text-align:center;
 background:#6495ed;
 color:#fff;
 border-radius:5px;
 margin:0 auto 20px;
}
.btn-tri-right:after {
 content: '';
 display: inline-block;
 border-style: solid;
 border-width: 6px 0 6px 6px;
 border-color: transparent transparent transparent #fff;
 display: inline-block;
 width: 0;
 height: 0;
 position: absolute;
 top: 50%;
 right: 20px;
 margin-top:-6px;
}