[コピペで即使える]CSSだけで作った三角形の矢印ボタン

CSSのみでボタンを作る時、皆さんは、どのように作っていますか？

今回は、CSSで三角形の上向き・下向き矢印ボタンの作り方を紹介したいと思います！
以下の写真が、これから製作する矢印ボタンのブラウザでの表示となります。

では、さっそくhtmlとcssを見ていきましょう！
以下がHTMLです。

<div class="upward"></div>
<div class="downward"></div>

以下がCSSです。

.upward{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-left: 30px;
}
.upward::before,.upward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.upward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color: blue;
    border-radius: 25%;
}
.upward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
}
.downward{
    margin: 0 20px 0 8px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.downward::before,.downward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.downward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid  blue;
    background-color:  blue;
    border-radius: 25%;
}
.downward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}

解説

.upward::before, .downward::beforeの部分が四角形の外枠になっています。
→四角形の色・大きさを変える際は、ここをいじります。

.upward::after, .downward::afterの部分が矢印です。
→矢印の大きさ、向きを変える際は、この.upward::afterや.downward::afterを変える必要があります。

「CSS三角形作成ツール」
http://apps.eky.hk/css-triangle-generator/ja

この三角形作成ツールが、けっこうオススメで、この作成ツールで、矢印の向き・色・大きさなどを指定できます。
ここで作ったものを.upward::afterや.downward::afterに貼り付けると、自分の好きな色・向きで、矢印を作成できます。
僕の場合は、貼り付けただけだと、矢印が真ん中に来ないので、margin-leftで真ん中に来るように調整しています。