system
大貫 晃一

2020.7.8HTML/CSS 

システムエンジニア

大貫 晃一

【CSS】地味に時間が掛かるボタンの装飾まとめ

ボタンの装飾を擬似要素で作ろうとすると意外と時間がかかります。
画像で入れると画質が気になりますし、細かな装飾もCSSで作ればサイト全体の見栄えもよくなるので出来ればCSSで作りたいですね。
そこで個人的によく使うボタンの装飾を4種類ほどまとめました。

ボタンのアイコンはFont Awesomeを使用しています。

ベーシックなボタン

別タブで開くボタン

お問い合わせボタン

PDFボタン

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ