Webページに配置されているボタンによくこんな感じの矢印がついています。
デザインファイルから画像をスライスして配置してもいいんですけど、「CSSでどうにかならないかなぁ…。」って言う時ありますよね。今回はこの矢印マークをCSSで作る方法を紹介します。
1 | <a href="" class="btn"><span>サービス一覧</span></a> |
ボタンのHTMLはこんな感じですね。矢印とテキストをセットで中央配置するためのspanタグを含めています。
続いてCSSです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .btn { display: block; width: 300px; height: 50px; text-align: center; line-height: 50px; background: #000; font-weight: bold; text-decoration: none; border-radius: 5px; } .btn span{ color: #FFF; position: relative; padding-left: 30px; } .btn span::before{ content: ""; position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-top: -5px; } |
::beforeを使って擬似的に四角形を作り、上と右にボーダーをつけてやり、45°回転させると矢印マークの出来上がりです。
あとはちょうど良い位置に配置してあげればバッチリですね。使い勝手のよいCSSなのでコピペで使い回しできるようスニペットに登録しておくと良いかもしれません。
それではまた！
採用サイトの制作やindeedによる求人広告運用はシンス株式会社まで。
〈 この記事を書いた人 〉
WEBプロデューサー越水大輔
シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。
