blog

ブログ

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

| カテゴリー : HTML/CSS

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

button-arrow_01

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

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

続いてCSSです。

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

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

それではまた!

採用サイトの制作やindeedによる求人広告運用はアイドットデザインまで。

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

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