CSSのみでボタンを作る時、皆さんは、どのように作っていますか？
今回は、CSSで三角形の上向き・下向き矢印ボタンの作り方を紹介したいと思います！
以下の写真が、これから製作する矢印ボタンのブラウザでの表示となります。
では、さっそくhtmlとcssを見ていきましょう！
以下がHTMLです。
<divclass="upward"></div><divclass="downward"></div>以下がCSSです。
.upward{position:relative;display:inline-block;padding:00016px;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:1pxsolidblue;background-color:blue;border-radius:25%;}.upward::after{margin-left:4.5px;width:0;height:0;border-style:solid;border-width:05px8.7px5px;border-color:transparenttransparent#fffffftransparent;}.downward{margin:020px08px;position:relative;display:inline-block;padding:00016px;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:1pxsolidblue;background-color:blue;border-radius:25%;}.downward::after{margin-left:4.5px;width:0;height:0;border-style:solid;border-width:8.7px5px05px;border-color:#fffffftransparenttransparenttransparent;}解説
.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で真ん中に来るように調整しています。