【HTML/CSS】CSSだけで矢印アイコン＆ボタンを作る方法

CSSだけで矢印アイコンがあるボタンを作る方法の紹介です。
テキストのみのリンクと背景色のあるボタンタイプの２つのサンプルをコピペで利用できます。

この記事の目次

  1. ベースとなる共通のHTMLとCSS
  2. 矢印　#01　
  3. 矢印　#02　
  4. 矢印　#03　
  5. 矢印　#04　
  6. 矢印　#05　
  7. 矢印　#06　

ベースとなる共通のHTMLとCSS

全ての矢印はこちらの共通のHTMLとCSS、そしてその後に紹介する装飾用のCSSで構成されています。
テキストリンクはクラスが「arrow」、ボタンは「arrow_btn」となっており、「arrow_01」が矢印の種類なので、お好きな組み合わせでお使いください。

共通のHTML

テキストリンク用

<a href="#" class="arrow arrow_01">共通のHTML</a>

ボタン用

<a href="#" class="arrow_btn arrow_01">共通のHTML</a>

 

共通のCSS

テキストリンク用

.arrow{ 
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
} 
.arrow::before,
.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

ボタン用

.arrow_btn{ 
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    background:#ddd;
    padding: 5px 10px 5px 30px;
} 
.arrow_btn::before,
.arrow_btn::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

矢印　#01

矢印　#01　テキストリンク
矢印　#01　ボタン

.arrow_01::before{
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

矢印　#02

矢印　#02　テキストリンク
矢印　#02　ボタン

.arrow_02::before{
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
    border-left: 5px solid #000;
}

矢印　#03

矢印　#03　テキストリンク
矢印　#03　ボタン

.arrow_03::before{
    width: 13px;
    height: 13px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #000;
}
/* テキストリンク */
.arrow_03::after{
    left: 3px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* ボタン */
.arrow_btn.arrow_03::after{
    left: 13px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

矢印　#04

矢印　#04　テキストリンク
矢印　#04　ボタン

.arrow_04::before{
    width: 13px;
    height: 13px;
    background: #000;
}
/* テキストリンク */
.arrow_04::after{
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #fff;
}
/* ボタン */
.arrow_btn.arrow_04::after{
    left: 15px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #fff;
}

矢印　#05

矢印　#05　テキストリンク
矢印　#05　ボタン

.arrow_05::before{
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    border: 1px solid #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
/* テキストリンク */
.arrow_05::after{
    left: 3px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* ボタン */
.arrow_btn.arrow_05::after{
    left: 13px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

矢印　#06

矢印　#06　テキストリンク
矢印　#06　ボタン

.arrow_06::before{
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 50%;
}
/* テキストリンク */
.arrow_06::after{
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #000;
}
/* ボタン */
.arrow_btn.arrow_06::after{
    left: 15px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #000;
}

© GOKAN DESIGN STUDIO