ボタンによくついている矢印マークをCSSで作る方法

Webページに配置されているボタンによくこんな感じの矢印がついています。

button-arrow_01

デザインファイルから画像をスライスして配置してもいいんですけど、「CSSでどうにかならないかなぁ…。」って言う時ありますよね。今回はこの矢印マークをCSSで作る方法を紹介します。

ボタンのHTMLはこんな感じですね。矢印とテキストをセットで中央配置するためのspanタグを含めています。

続いてCSSです。

::beforeを使って擬似的に四角形を作り、上と右にボーダーをつけてやり、45°回転させると矢印マークの出来上がりです。

あとはちょうど良い位置に配置してあげればバッチリですね。使い勝手のよいCSSなのでコピペで使い回しできるようスニペットに登録しておくと良いかもしれません。

それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »