ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : HTML/CSS

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

button-arrow_01

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

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

続いてCSSです。

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

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

それではまた!

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

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

follow us in feedly

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

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。